标签：picker style 微信 mask indicator Test view
微信小程序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。
初夏de遐想
发布了15 篇原创文章 · 获赞 2 · 访问量 4843
私信
关注
标签：picker,style,微信,mask,indicator,Test,view 来源： https://blog.csdn.net/weixin_38138153/article/details/104079562
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。