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