微信小程序一个页面多个picker实现
来源:互联网 发布:网上招淘宝客服可信吗 编辑:程序博客网 时间:2024/05/19 01:09
多个picker 会出现页面联动 index错乱
1.wxml
<view class="column_list mt_10" wx:for="{{objArray}}" wx:for-item="itm" wx:for-index="idx" > <text class="font15">{{itm.title}} </text> <picker class="inputText" bindchange="bindChange_select" value="{{itm.index}}" data-current="{{idx}}" range="{{itm.option}}" > <view class="select_picker"> {{itm.option[itm.index]}} <image mode="aspectFit" class="select_arrow" src="../../images/select_arrow.png"></image> </view> </picker> </view>
2..js
Page({ data: { //每个对象就是一个选择器,有自己的索引值index,标题title,选项option(又是一个数组) objArray: [ { index: 0, title: '选项一', option: ['1', '2', '3', '4', '5'], }, { index: 0, title: '选项二', option: ['一', '二', '三', '四', '五'], }, { index: 0, title: '选项三', option: ['①', '②', '③', '④', '⑤'] }, ] }, //绑定事件,因为不能用this.setData直接设置每个对象的索引值index。 //所以用自定义属性current来标记每个数组对象的下标 bindChange_select: function (ev) { // 定义一个变量curindex 储存触发事件的数组对象的下标 const curindex = ev.target.dataset.current //根据下标 改变该数组对象中的index值 this.data.objArray[curindex].index = ev.detail.value //把改变某个数组对象index值之后的全新objArray重新 赋值给objArray this.setData({ objArray: this.data.objArray }) }})
阅读全文
0 0
- 微信小程序一个页面多个picker实现
- 微信小程序picker组件
- 微信小程序 Picker
- 微信小程序-picker
- 微信小程序----组件之picker
- 微信小程序之picker组件
- 一个页面实现多个管理页面任意切换
- 微信小程序把玩(十八)picker组件
- 微信小程序picker-view日期选择器
- 微信小程序基于picker的级联菜单
- 微信小程序组件(七)picker选择器
- 微信小程序 图文混编 重写picker组件
- 微信小程序—picker(滚动选择器)
- 微信小程序例子——使用picker实现时间和日期选择框
- android中一个activity实现多个xml页面互换。
- android 一个页面内 多个listview的实现
- android 一个页面内 多个listview的实现
- 一个页面内,多个listview的实现
- redis 集群搭建
- MariaDB数据库的中主从复制的配置实现
- Docker学习笔记
- VMware Workstation虚拟机不能联网的解决办法
- 在windows上安装redis并设置密码,IP绑定【提供安装包】
- 微信小程序一个页面多个picker实现
- easyui刷新当前tab
- Java多线程安全之对象的发布和溢出、线程封闭详解
- 分苹果
- java 学习笔记之位移运算符
- kmp算法模板
- Qt4和Qt5之qt-vs-addin插件如何共存与使用
- Linux vi/vim编辑器常用命令与用法总结
- 数人云|当K8S遇上微服务-京东金融PaaS平台思考与实践