微信小程序原生picker组件选项内容过长不换行，自定义组件解决

微信小程序原生picker组件，选项内容多的时候会隐藏掉，导致体验不好，想法是使用原生的picker-view实现内容换行。效果如下

1.模拟选择框

<view style="width: 95%;" bind:tap="projectClick" wx:if="{{projectList.length}}"  range-key="name" value="{{index}}" range="{{projectList}}">
    <view class="picker">
        <view class="detail">
            {{selectedProName}}
        </view>
    </view>
    <image src="../../lib/images/jiantou.png" style="height:70rpx;float: right;width: 30rpx;margin-top: -70rpx;"></image>
</view>

2.模拟遮罩层，点击遮罩层关闭弹框

//模拟弹框黑色遮罩层
<view class="background-screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>

3.使用picker-view组件，放弹框里模拟选择框

<picker-view indicator-class="pickerClass" value="{{[index]}}"  bindchange="bindPickerChange" wx:if="{{showPopup}}">
    <view class='btns'>
      <view bindtap="onClose">取消</view>
      <view bindtap="onConfirm" style="color: #39bf62;cursor: pointer;">确认</view>
    </view>
    <picker-view-column class="pickerColumn">
      <view wx:for="{{projectList}}" wx:key="index" class="picketText">{{item.name}}</view>			
    </picker-view-column>
</picker-view>

 4.ji方法

 projectClick(){
  this.setData({
    showPopup: true,
    showModalStatus: true,
    index: this.data.index
  })
 },
 hideModal(){
  this.setData({
    showPopup: false,
    showModalStatus: false,
  })
 },
  bindPickerChange: function (e) {
    // console.log(e)
    this.setData({
      index: e.detail.value
    });
  },

  onClose(){
    this.setData({
      showPopup: false,
      showModalStatus: false,
    })
  },
  onConfirm(e) {
    // console.log(e)
    this.setData({
      showPopup: false,
      showModalStatus: false,
      showNone: false,
      deviceList: [],
      pageNum: 1,
      index: this.data.index,
      selectedProName: this.data.projectList[this.data.index].name
    })
    wx.setStorageSync('project', this.data.projectList[this.data.index])
  },

 5.wxss

picker-view {
  width: 100%;
  height: 600rpx;
  position: fixed;
  bottom: 0;
  left:0;
  right:0;
  background-color: #fff;
  z-index: 999;
}

picker-view .btns{
  display: flex;
  width: 94%;
  padding: 0 25rpx;
  height: 100rpx;
  line-height: 100rpx;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 1rpx solid #eee;
  z-index: 10;
}
picker-view-column{
  margin-top: 10rpx;
}
picker-view-column .picketText{
  /* height: 120rpx !important; */
  font-size: 12px;
  /* overflow: auto !important; */
  text-align: center;
  color: #000;
}
.background-screen {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 555;
  background-color: #000;
  opacity: 0.3;
}