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

最新推荐文章于 2024-08-01 09:43:57 发布

初夏de遐想

最新推荐文章于 2024-08-01 09:43:57 发布

阅读量6.9k

点赞数 6

分类专栏：微信小程序

本文链接：https://blog.csdn.net/weixin_38138153/article/details/104079562

版权

微信小程序picker-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%;