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

冷不防 2021-11-26 23:36 2158阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70][]

小程序里面如果想要自定义一个弹框如上图所示的样式，首先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%;
    }

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
        })
      },

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70]: /images/20211126/be8e9b88f4ed407697dc9ca451d1dee3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1]: /images/20211126/264724f47e51440d8bdea978521468d6.png