微信小程序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。

  • 4
    点赞
  • 12
    收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页
评论 2

打赏作者

初夏de遐想

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值