【微信小程序】picker 滚动选择器

选择性别

参考：picker | 微信开放文档

<view style="display: flex; align-items: center;">选择性别：<picker header-text="选择性别" bindchange="bindChange" value="{{sex}}" range-key="sex_name" range="{{sex_list}}"><view class="picker">{{sex}} <van-icon name="arrow-down" /></view></picker>
</view>

data:{sex:'',sex_list:[{id: 5,sex_name: "男"},{id: 10,sex_name: "女"}],
}

bindChange(e) {const res = this.data.sex_list[e.detail.value]this.setData({sex: res.sex_name})
},

picker修改

刚开始使用的是vantweap的picker，但是居然有蒙版还无法自定义样式。

Picker 选择器 - Vant Weapp

<van-picker show-toolbarcolumns="{{ list }}" bind:cancel="onClose" bind:confirm="onChange"  custom-class="picker" active-class="active" column-class="column"
/>

.van-picker__toolbar {position: absolute;bottom: 0;width: 100%;z-index: 9;background-color: transparent!important;display: flex;align-items: center;justify-content: space-around;
}
.picker {height: 55vh;width: 100vw;background: transparent!important;margin-top: 180rpx;
}
.active {background: red!important;
}
.column {background-color: yellow;
}

list: [{text: '1-1'},{text: '2-1'}
],

onChange(e) {this.setData({id: e.detail.value.id})
},

苦恼ing。最后看到原生组件有自定义蒙版样式，豁然开朗~

<view style="height: 55vh; position: relative;"><picker-view indicator-style="height: 50px; background: rgba(255,255,255,0.4);position: relative; " style="width: 100%; height: 270px;background: rgab(255,255,255,0.1);color: #333;" mask-style="background: transparent" value="{{active}}" bindchange="onChange"
><picker-view-column><view wx:for="{{list}}" wx:key="index" style="line-height: 50px; text-align: left; padding: 0 20rpx; white-space:nowrap;text-overflow:ellipsis;overflow:hidden">{{item.text}}</view></picker-view-column></picker-view><view  class="btn"><view class="cancel" bind:tap="onClose">取消</view><view class="sure" bind:tap="onConfirm">确定</view></view></view>

激活项的蒙版在文字上方

利用relative的层级z-index：-1展示在文字下方。

indicator-style="position: relative; z-index: -1;"

onChange(e) {let idx = e.detail.value[0] this.setData({idx})
},
onConfirm() {this.setData({id: this.data.list[this.data.idx].id,})
},

【微信小程序】picker 滚动选择器相关推荐

range 小程序picker_微信小程序picker滚动选择器使用详解
今天修改小程序做章节内容筛选使用到了picker滚动选择器,看了官方文档和一些网上的文章后,终于算是弄明白了这个组件的使用,这里把我对这picker滚动选择器的使用记录下: picker基础使用 pi ...
微信小程序之滚动选择器(时间日期选择器)
微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到pick ...
微信小程序自定义滚动选择器
最近项目里有个需求要做个滚动选择器,在网上找了半天也没找到合适的demo,没办法只能发挥我的聪明才智创造一个,不哔哔上代码. js: // pages/xuanzeqi/xuanzeqi.js Pag ...
微信小程序picker地区选择器显示省市二级联动
效果图: 微信官方配置二级level="city",无效(官方说正在修改2022.12.22) 自己写,用多级联动写 html: <picker mode="mul ...
微信小程序-通知滚动小提示
代码地址如下: http://www.demodashi.com/demo/14044.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
php文字左右滚动通告,微信小程序左右滚动公告栏效果代码实例
这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下 {{notice}} x data: ...
IOS微信小程序页面滚动导致滚动穿透的解决办法
IOS微信小程序页面滚动导致滚动穿透的解决办法当微信小程序页面存在弹窗并且有可滚动的列表时,IOS默认的页面滚动会使弹窗滚动列表失焦,从而出现弹窗列表无法滚动的情况第一步第二步当微信小程序页面 ...
关于微信小程序picker之multiSelector多列选择器
文章目录前言使用步骤 1.wxml 2.读入数据总结前言由于业务场景,需要使用自定义内容的多列选择器,自然而然选择了微信小程序官方提供的picker选择器,mode模式为multiSelec ...
微信小程序picker组件实现多列选择器
[微信小程序]picker组件多列选择器的使用功能需求用微信小程序的多列选择器实现对一个树状结构图中的末节点的选择,要求选择器的第一列改变时,后面列的选项会联动改变.树状结构图的部分数据如下图; ...
微信小程序的省市区三级地址mysql_微信小程序picker实现的省市区三级联动
微信小程序的省市区三级联动需要使用到的是Picker多列选择器,参考文档:https://www.w3cschool.cn/weix..., 案例中用到的省市区的json文件在文后发出出来. 废话不多 ...

【微信小程序】picker 滚动选择器

选择性别

picker修改

【微信小程序】picker 滚动选择器相关推荐

最新文章

热门文章