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

原创已于 2024-05-09 16:09:17 修改 · 2.2w 阅读

42 ·

CC 4.0 BY-SA版权

文章标签：

#picker-view修改样式 #picker修改样式 #小程序弹框修改样式

于 2019-07-23 13:37:54 首次发布

小程序专栏收录该内容

55 篇文章

订阅专栏

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

<input class='display' placeholder-class='placeholderStyle' type="text" name='unit' placeholder='请选择您子女所在的年级' value='{{array[index]}}'/>  
<view class='pickerview'>
    <picker-view indicator-class='pickerCol' value="{{value}}" bindchange="bindChange">
      <view class='btns'>
        <view>取消</view>
        <view>确定</view>
      </view>
      <picker-view-column>
        <view wx:for="{{array}}" style="line-height: 50px">{{item}}</view>
      </picker-view-column>
    </picker-view>
  </view>

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