微信小程序 picker-view 自定義picker

由於微信原生picker組件不能修改樣式，就本身用picker-view封裝了一個

直接上代碼

<!-- components/picker/picker.wxml -->
<input placeholder="{{placeholder}}" value="{{value}}" disabled="{{true}}" bindtap="showPicker" />
<view class="mask" wx:if="{{showPicker}}" bindtap="close">
  <view class="picker" animation="{{animationData}}">
    <view class="picker-header">
      <button bindtap="cancel" class="cancal">取消</button>
      <button bindtap="confirm" class="confirm">肯定</button>
    </view>
    <picker-view bindchange="change" value="{{selectValues}}" class='pickerView' indicator-style="height: 50px;" style="width: 100%; height: 300px;">
      <picker-view-column  wx:if="{{!multiSelect}}">
        <view wx:for="{{options}}" wx:key="index" style="line-height: 50px;text-align:center">
          {{label?item[label]:item}}
        </view>
      </picker-view-column>
      <picker-view-column wx:if="{{multiSelect}}"  wx:for="{{options}}" wx:for-item="option" wx:key="index">
        <view wx:for="{{option}}" wx:key="index" style="line-height: 50px;text-align:center">
          {{label?item[label]:item}}
        </view>
      </picker-view-column>
    </picker-view>
  </view>
</view>複製代碼

添加validate和validatePass字段是由於項目有一個需求是須要先完成某個選擇才能夠繼續（若是有更好的方法請你們指教）

// components/picker/picker.js
Component({
  behaviors: ['wx://form-field'],
  /**
   * 組件的屬性列表
   */
  properties: {
    validate: {
      type: Boolean,
      value: false
    },
    placeholder: {
      type: String,
      value: '請選擇'
    },
    multiSelect: {
      type: Boolean,
      value: false
    },
    label: String,
    options: Array,
    value: String,
    validatePass: {
      type: Boolean,
      value: false
    },
    title: String
  },

  /**
   * 組件的初始數據
   */
  data: {
    // value: '',
    showPicker: false,
    selectValue: 0,
    selectValues: null
  },

  /**
   * 組件的方法列表
   */
  methods: {
    showPicker() {
      // 用that取代this，防止沒必要要的狀況發生
      var that = this;
      // 建立一個動畫實例
      var animation = wx.createAnimation({
        // 動畫持續時間
        duration: 500,
        // 定義動畫效果，當前是勻速
        timingFunction: 'ease'
      })
      // 將該變量賦值給當前動畫
      that.animation = animation
      // 先在y軸偏移，而後用step()完成一個動畫
      animation.translateY(200).step()
      // 用setData改變當前動畫
      that.setData({
        // 經過export()方法導出數據
        animationData: animation.export(),

      })
      // 設置setTimeout來改變y軸偏移量，實現有感受的滑動
      setTimeout(function () {
        animation.translateY(0).step()
        that.setData({
          animationData: animation.export()
        })
      }, 50)
      if (this.data.validate) {
        if (this.data.validatePass) {
          this.setData({
            showPicker: !this.data.showPicker
          })
        } else {
          wx.showToast({
            title: this.data.title,
            icon: 'none',
            image: '',
            duration: 1500,
            mask: false,

          })
        }
      } else {
        this.setData({
          showPicker: !this.data.showPicker
        })
      }

      this.triggerEvent("show");
    },

    preventTouchMove: function () { },


    cancel() {
      this.setData({
        // value: this.data.value,
        showPicker: false
      })
      let detail = {
        value: this.data.selectValue
      }
      this.triggerEvent("cancel", detail);
    },
    confirm() {
      let arr = []
        //默認選中第一項
      if(!this.data.selectValues) {   
        if (this.data.multiSelect) {
          let opt = this.data.options
          for (let i = 0; i < opt.length; i++) {
            arr.push(0)
          }
          this.data.selectValue = arr
        } else {
          arr.push(0)
        }
        console.log(arr)
      } else {
        arr = this.data.selectValues
      }
      
      let selectValue = this.data.selectValue
      this.setData({
        value: selectValue,
        selectValue: selectValue,
        selectValues: arr,
        showPicker: false
      })
      let detail = {
        value: selectValue
      }
      this.triggerEvent("confirm", detail);
    },
    change(e) {
      console.log(e)
      let values = e.detail.value
      this.data.selectValue = this.data.multiSelect? values: values[0]
      this.data.selectValues = values
    },



  }
})複製代碼

/* components/picker/picker.wxss */

.mask {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .4);
    transition: all .4s ease-in-out 0;
    pointer-events: none;
    opacity: 1;
    pointer-events: auto
}

.picker {
    position: absolute;
    width: 100%;
    height: 600rpx;
    bottom: 0;
    left: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: all .4s ease-in-out 0;
}

.picker-header {
    height: 20%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
    height: 100rpx;
    padding: 0 20rpx;
}

.cancal {
    font-size: 16px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
}

.confirm {
    font-size: 16px;
    font-weight: 400;
    color: rgba(31, 200, 207, 1) !important;
}

button {
  background: inherit;
  border: none;
  margin: 0;
}

button:after {
    border-radius: 0rpx;
    border: none;
}複製代碼

使用示例

<v-picker validate="{{true}}" validatePass="{{validatePass}}" title="請先選擇設備類型" bind:show="showProductPicker" data-index="{{index}}" bind:confirm="productIdChange" placeholder="請選擇產品類型" value="{{item.productName}}" options="{{productIds}}" label="productName"></v-picker>複製代碼

showProductPicker() {
        if (!!this.data.form2.deviceTypeId || this.data.form2.deviceTypeId !== '') {
            this.setData({
                validatePass: true
            })
        } else {
            this.setData({
                validatePass: false
            })
        }
    },複製代碼