微信小程序picker-view样式踩坑记录

• picker-view适用范围
• 一个简单的例子
• 样式层次
• picker-view的style
• picker-view-column
• picker-view的mask-style
• picker-view的indicator-style
• 总结

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