小程序下拉框自定义样式picker修改样式picker-view修改样式

小程序里面如果想要自定义一个弹框如上图所示的样式，首先picker是可以放弃的了，因为它根本没有办法修改样式，也一直被吐槽直到picker-view的出现，picker-view修改样式起来可以说是为所欲为了，下面我们说一下需要注意的地方，最下方是官方文档属性，我这里用的是 indicator-class 属性修改中间的样式

TIP：

1. input 的 placeholder 的样式可以用 placeholder-class 属性 在wxss 里面来设置

2. picker-view 的选中事件必须是 bindchange 用 bindtap 或者 catchtap 都不行

3. picker-view 样式重置可以用 indicator-class 在wxss里面设置，也可以用 indicator-style 直接在 wxml 里面设置

4. picker-view 的 border-radius 属性，必须是 picker-view-column 和 picker-view 同时设置才可以否则不会出现圆角效果

5. picker-view 中间变窄的话，直接用 indicator-class 在wxss里面设置宽度，再调整居中就可以了

picker-view {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #FFF;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
  height: 45%;
  border-radius: 30rpx 30rpx 0 0;
}
picker-view-column {
  border-radius: 30rpx 30rpx 0 0;
  color: #444444;
  font-size: 28rpx;
}
.pickerCol {
  width: 50%;
  height: 96rpx;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(to right,#FBFBFB,#FFAC30,#FBFBFB) 1 1;
  margin-left:25%;
}

  

    
      
        取消
        确定
      
      
        {{item}}
      
    
  

Page({

  /**
   * 页面的初始数据
   */
  data: {
    array: ['1年级','2年级','3年级','4年级','5年级','6年级'],
    index: -1,
    display: 'display'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  showPicker: function () {
    this.setData({
      display: ''
    })
  },
  hideView: function () {
    this.setData({
      display: 'display'
    })
  },
  // 选择子女所在的年级
  bindPickerChange: function (e) {
    console.log('picker下拉项发生变化后，下标为：', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },