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