微信小程序picker-view样式踩坑记录
picker-view适用范围
在小程序的开发中，有些时候需要用到下拉列表，一般情况下直接用微信现成的 picker组件已经可以满足，但是需要用到交互式下拉列表或者需要自定义列表样式的时候picker组件就不给力了，这时候就需要用picker-view组件自己定义下路列表及交互逻辑。
就像下面的例子中，第二列的选项是根据第一列的选项动态改变的。
一个简单的例子
picker-view真是不用不知道，一用吓一跳，文档里写得不够清晰，demo也是过于简单，连个遮罩层都没有。
下面是本人记录的一个简单运用例子。
Test.js
Page({
/**
* 页面的初始数据
*/
data: {
fruits:['香蕉','草莓','苹果','橙子'],
selectedIdx:0,
showSelector:true
},
})
Test.wxml
<!--pages/Test/Test.wxml-->
<view style="width:100%;height:100%;">
<text>HelloWorld</text>
<!--Selector遮罩-->
<view wx:if="{{showSelector}}"
style='position:absolute;width:100%;height:100%;background:rgba(0, 0, 0, 0.7);left:0px;top:0px;z-index:99'>
<!--Banner-->
<view style='width:100%;background:white;height:30px;bottom:45%;position:absolute'>
<view class='pickerBanner' style='left:10px;text-align:left'>取消</view>
<view class='pickerBanner'>选择水果</view>
<view class='pickerBanner' style='right:10px;text-align:right'>确定</view>
</view>
<!--Picker-->
<picker-view
indicator-style="height: 50px;"
style="width: 100%; height: 45%;position:absolute;bottom:0px;text-align:center;background:white"
value="{{selectedIdx}}">
<!--Columns-->
<picker-view-column>
<view wx:for="{{fruits}}" wx:for-index="index">{{item}}</view>
</picker-view-column>
</picker-view>
</view>
</view>
Test.wxss
/* pages/Test/Test.wxss */
page{
width:100%;
height:100%;
}
.pickerBanner{
position: relative;
line-height: 30px;
float:left;
width:33%;
text-align: center;
}
样式层次
上述的例子很简单，就是一个下拉列表然后一个遮罩层。其实picker-view是由几个<view>堆叠而形成的组件，文档中对这方面的描述比较模糊。
以下是对微信文档中关于picker-view描述不清晰的一些补充。
picker-view的style
picker-view的style作用在最低层。把该层调成红色后效果如下。
<picker-view
indicator-style="height: 50px;"
style="width: 100%; height: 45%;position:absolute;bottom:0px;text-align:center;background:red"
value="{{selectedIdx}}">
<!--Columns-->
</picker-view>
picker-view-column
这个比较好理解，就是下拉列表中的其中一列，它显示在倒数第二层。
把该层的背景调成红色后效果如下（picker-view的背景色为白色）
<picker-view-column>
<view wx:for="{{fruits}}" wx:for-index="index" style="background:red">{{item}}</view>
</picker-view-column>
picker-view的mask-style
mask-style和mask-class作用的地方都是一样的，这里就不分开叙述了。它们作用在上图中你看到的那个白色半透明层，堆叠顺序在倒数第三层。将该层
调成半透明绿色后效果如下（picker-view-column背景色依然是红色）
<!--Picker-->
<picker-view
indicator-style="height: 50px;"
mask-style="background:rgba(0, 255, 0, 0.7)"
style="width: 100%; height: 45%;position:absolute;bottom:0px;text-align:center;background:white"
value="{{selectedIdx}}">
<!--Columns-->
<picker-view-column>
<view wx:for="{{fruits}}" wx:for-index="index" style="background:red">{{item}}</view>
</picker-view-column>
</picker-view>
picker-view的indicator-style
indicator-style和indicator-class作用的地方都是一样的，这里就不分开叙述了。它们作用在选中区，显示在最顶层。将该层设置为半透明绿色后效果如下（picker-view-column背景色依然是红色）
<picker-view
indicator-style="height: 50px;background:rgba(0, 255, 0, 0.7)"
style="width: 100%; height: 45%;position:absolute;bottom:0px;text-align:center;background:white"
value="{{selectedIdx}}">
<!--Columns-->
<picker-view-column>
<view wx:for="{{fruits}}" wx:for-index="index" style="background:red">{{item}}</view>
</picker-view-column>
</picker-view>
总结
至此，picker-view的样式层次从低到顶依次为：picker-view的style, picker-view-column的style, picker-view的mask-style, picker-view的indicator-style。