小程序picker-view自定义宽度

demo.wxml

  <button bindtap='showPicker'>显示pickerbutton>
<view>{{year+'年'+day}}view>
<view class="outer {{show?'show':'hidden'}}">
  <view class="btns">
    <view bindtap='cancel'>取消view>
    <view bindtap='confirm'>确定view>
  view>
  <view class="container">
  <picker-view indicator-style="height: 50px;" style="width: 20%; height: 200px;" value="{{yearIndex}}" bindchange="bindChange" class="parent">
    <picker-view-column>
      <view wx:for="{{years}}" style="line-height: 50px;" wx:key="{{index}}">{{item}}年view>
    picker-view-column>
  picker-view>
   <picker-view indicator-style="height: 50px;" style="width: 80%; height: 200px;" value="{{dayIndex}}" bindchange="longChange" class="parent">
    <picker-view-column>
      <scroll-view  wx:for="{{days}}" scroll-x style='height:50px;' wx:key="{{index}}"><view style="line-height: 50px;">{{item}}日view>scroll-view>
    picker-view-column>
  picker-view>
  view>
view>

demo.wxss

page{
  height: 100vh;
  position:relative;
}
.container{
  display: flex;
  flex-wrap: nowrap;
}
.parent{
  text-align: center;
}
.outer{
  position:absolute;
  bottom:0;
  width:100%;
}
.btns{
  display: flex;
  border-top:1px solid #ccc;
}
.btns view{
  flex:1;
  margin:20rpx;
}
.btns view:nth-last-of-type(1){
  text-align: right;
  color:orange;
}
.show{
  bottom:0;
  transition:all 0.5s ease;
}
.hidden{
  bottom:-100%;
  transition:all 0.5s ease;
}

demo.js

const date = new Date()
const years = []
const days = []

for (let i = 1990; i <= date.getFullYear(); i++) {
  years.push(i)
}
for (let i = 1; i <= 31; i++) {
  days.push(i +'ddddddddddddddddddddddddddddddddd')
}

Page({
  data: {
    years: years,
    year: date.getFullYear(),
    tempYear: date.getFullYear(),
    days: days,
    day: '1ddddddddddddddddddddddddddddddddd',
    tempDay:'1ddddddddddddddddddddddddddddddddd',
    value: 20,
    show:true,
    yearIndex:[9999],
    dayIndex:[0]
  },
  bindChange: function (e) {
    const val = e.detail.value
    console.log(e.detail.value)
    this.setData({
      tempYear: this.data.years[val[0]],
    })
  },
  longChange: function (e) {
    console.log(e.detail.value)
    let day = this.data.days[e.detail.value[0]]
    this.setData({
      tempDay:day
    })
  },
  showPicker(){
    this.setData({
      show: true
    })
  },
  cancel(){
    this.setData({
      show:false
    })
  },
  confirm(){
    this.setData({
      day:this.data.tempDay,
      year:this.data.tempYear,
      show:false
    })
  }
})

查看效果图

本案例适用于：左列为省份，右列为详细地址等各种情况

ps:长的那一列，中文在scroll-view中不能左右滚动，而英文可以滚动，我也不知道为什么，如图中的ddddddddddddd就可以左右滚动，不过，现在这个效果能解决绝大部分情况