微信小程序 自定义picker封装成插件实现二级三级四级联动
2024-05-19 09:11:53
微信小程序 自定义picker封装成插件实现二级三级四级联动
页面调用
// array picker 的数组
// active picker 几级
// multiIndex picker 的回显
<PickerGroup array="{{array}}" active="{{4}}" multiIndex="{{[0,1,1,3]}}"></PickerGroup>
HTML
<view style="background:#FFF;padding:15px 0;"><picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange"range="{{defaultarray}}" value="{{multiIndex}}"><text>{{defaultarray[0][multiIndex[0]]}}</text><text wx:if="{{defaultarray.length>=2}}"> - {{defaultarray[1][multiIndex[1]]}}</text><text wx:if="{{defaultarray.length>=3}}"> - {{defaultarray[2][multiIndex[2]]}}</text><text wx:if="{{defaultarray.length>=4}}"> - {{defaultarray[3][multiIndex[3]]}}</text></picker>
</view>
js
Component({options: {styleIsolation: 'apply-shared'},properties: {active: Number, // 显示几级pickerarray: Array, // array 数据multiIndex: Array, // 回显数据},/*** 页面的初始数据 */data: {// 试例数据// array: [{// title: '一级列表1',// children: [{// title: '二级列表1',// children: [{// title: '三级列表1',// children: [{// title: '四级列表1'// }, {// title: '四级列表2'// }, {// title: '四级列表3'// }, {// title: '四级列表4'// }, {// title: '四级列表5'// }]// }, {// title: '三级列表2',// children: [{// title: '四级列表21'// }, {// title: '四级列表22'// }, {// title: '四级列表23'// }, {// title: '四级列表24'// }, {// title: '四级列表25'// }]// }, {// title: '三级列表3',// children: [{// title: '四级列表31'// }, {// title: '四级列表32'// }, {// title: '四级列表33'// }, {// title: '四级列表34'// }, {// title: '四级列表35'// }]// }]// }, {// title: '二级列表2',// children: [{// title: '三级列表21',// children: [{// title: '四级列表211'// }, {// title: '四级列表212'// }, {// title: '四级列表213'// }, {// title: '四级列表214'// }, {// title: '四级列表215'// }]// }, {// title: '三级列表22',// children: [{// title: '四级列表221'// }, {// title: '四级列表222'// }, {// title: '四级列表223'// }]// }, {// title: '三级列表23',// children: [{// title: '四级列表231'// }, {// title: '四级列表232'// }]// }]// }]// }, {// title: '一级列表2',// children: [{// title: '卡班组1',// children: [{// title: '卡数据线1',// children: [{// title: '卡传感量1'// }, {// title: '卡传感量2'// }, {// title: '卡传感量3'// }, {// title: '卡传感量4'// }, {// title: '卡传感量5'// }]// }, {// title: '卡数据线2',// children: [{// title: '卡传感量21'// }, {// title: '卡传感量22'// }, {// title: '卡传感量23'// }, {// title: '卡传感量24'// }]// }, {// title: '卡数据线3',// children: [{// title: '卡传感量31'// }, {// title: '卡传感量32'// }, {// title: '卡传感量33'// }]// }]// }, {// title: '卡班组2',// children: [{// title: '卡数据线21',// children: [{// title: '卡传感量211'// }, {// title: '卡传感量212'// }]// }, {// title: '卡数据线22',// children: [{// title: '卡传感量221'// }, {// title: '卡传感量222'// }, {// title: '卡传感量223'// }]// }, {// title: '卡数据线23',// children: [{// title: '卡传感量231'// }, {// title: '卡传感量232'// }]// }]// }]// }],defaultarray: [[],[],[],[]],},pageLifetimes: {show: function (options) {var that = this;var defaultarray = that.data.defaultarrayvar array = that.data.arrayconsole.log(array)console.log(that.data.active)//给defaultarray里的第1个数组赋值for (var i = 0, len = array.length; i < len; i++) {defaultarray[0].push(array[i].title)}// 给defaultarray里的第2个数组赋值if (this.data.active >= 2) {for (var i = 0, len = array[0].children.length; i < len; i++) {defaultarray[1].push(array[0].children[i].title)}}// 给defaultarray里的第3个数组赋值if (this.data.active >= 3) {for (var i = 0, len = array[0].children[0].children.length; i < len; i++) {defaultarray[2].push(array[0].children[0].children[i].title)}}if (this.data.active >= 4) {// 给defaultarray里的第4个数组赋值for (var i = 0, len = array[0].children[0].children[0].children.length; i < len; i++) {defaultarray[3].push(array[0].children[0].children[0].children[i].title)}}defaultarray.length = this.data.activeif(this.data.multiIndex.length<=0){that.setData({multiIndex: ("").padEnd(this.data.active,0).split("").map(x=>parseInt(x)),})}// 渲染that.setData({defaultarray: defaultarray,})//！！！！！！！！要展示到界面的数据一定要用setdata!!!!!!!!!// that.data.defaultarray = defaultarrayconsole.log(defaultarray)console.log()},},methods: {bindMultiPickerChange: function (e) {console.log('选中的值为', e.detail.value)this.setData({multiIndex: e.detail.value})},bindMultiPickerColumnChange: function (e) {console.log('修改的列为', e.detail.column, '，（列下标）值为', e.detail.value);var that = this;var defaultarray = that.data.defaultarray,array = that.data.array,multiIndex = that.data.multiIndex// 更改multiIndexmultiIndex[e.detail.column] = e.detail.value// 联动变化defaultarray数组var searchColumn = () => {for (var i = 0; i < array.length; i++) {var arr1 = []; //defaultarray[1]var arr2 = []; //defaultarray[2]var arr3 = []; //defaultarray[3]if (i == multiIndex[0]) { //找到修改的列号ifor (var j = 0; j < array[i].children.length; j++) {arr1.push(array[i].children[j].title);if (this.data.active >= 3) {if (j == multiIndex[1]) {for (var k = 0; k < array[i].children[j].children.length; k++) {arr2.push(array[i].children[j].children[k].title);if (this.data.active >= 4) {if (k == multiIndex[2]) {for (var g = 0; g < array[i].children[j].children[k].children.length; g++) {arr3.push(array[i].children[j].children[k].children[g].title);}defaultarray[3] = arr3;}}}defaultarray[2] = arr2;}}}defaultarray[1] = arr1;}};}switch (e.detail.column) {case 0:multiIndex[1] = 0;multiIndex[2] = 0;multiIndex[3] = 0;searchColumn();break;case 1:multiIndex[2] = 0;multiIndex[3] = 0;searchColumn();break;case 2:multiIndex[3] = 0;searchColumn();break;}this.setData({defaultarray: defaultarray,multiIndex: multiIndex});},},})
下载地址: link
微信小程序 自定义picker封装成插件实现二级三级四级联动相关推荐
- 【小程序】一文学会微信小程序自定义组件封装
一.什么是自定义组件 在实际开发过程中,经常会有代码复用的情况,即在不同的页面有类似结构的代码块,类似的代码反复出现,这样会增加代码维护成本,也会造成代码的高耦合,为了解决这一情况,微信小程序支持了更 ...
- 微信小程序自定义picker多列选择器
需求说明 使用 mpvue 实现自定义的 picker 多列选择器. 1.数据结构说明 根据 picker 的数据特征,需要构造一个如下所示的数据结构.data数组中的三个元素,分别用于渲染 pick ...
- 关于微信小程序自定义Picker样式的picker-view
这里给大家介绍一下在开发微信小程序中使用到需要自定义样式的picker(picker-view)的基本用法 这里就是一个很简单的自定义样式的Picker. 下面贴出代码 wxml: <picke ...
- 微信小程序自定义picker弹框组件
要有遥不可及的梦想,也要有脚踏实地的本事.----------- Grapefruit.Banuit Gang(香柚帮) 柚子写项目遇到了一个问题,就是微信小程序官方文档上面的弹框组件picker,它 ...
- 微信小程序-自定义picker选择器
github地址 为什么要自定义picker 原生小程序picker不支持自定义样式,无联动. 该自定组件 支持自定义数据 支持自定义样式 支持传入和返回对象或者基本类型 支持联动(改变父列,子列根据 ...
- 小程序picker标题_微信小程序-自定义picker选择器
avatar 为什么要自定义picker 原生小程序picker不支持自定义样式,无联动. 该自定组件 支持自定义数据 支持自定义样式 支持传入和返回对象或者基本类型 支持联动(改变父列,子列根据关联 ...
- 微信小程序父级之间的传值_微信小程序自定义组件封装及父子间组件传值的方法...
首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议wxzx-xxx命名 例如,我们封装的组件名为 **wxzx-loadmore wxzx-loadmore.wxml 正在 ...
- 小程序自定义导航封装成组件后如何监听滚动距离
我获取滚动的距离,主要是想做自定义导航吸顶效果之后对样式进行改变的效果 思路:根据滚动距离的临界值,改变isActive的值 第一步:曲线救国的方式,因为onPageScroll方法在组件中不生效(目 ...
- 微信小程序自定义标签组件component封装、组件生命周期，组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信 本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...
- 微信小程序下拉框插件_微信小程序自定义select下拉选项框组件的实现代码_清玖_前端开发者...
知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...
最新文章
- 盘丝洞服务器维护,斗战神哪些区合区了_斗战神合区后名字重复怎么办_快吧游戏...
- 从谷歌离职回到西湖大学，只为让AI听懂你的悲伤！
- 学习笔记——Numpy基本操作（二）
- 在云服务器上执行C程序和python程序（centos系统）
- Qt Linguist翻译过程概述
- 将 GridView 中的内容导出到 Excel 中多个工作表（Sheet） 的方法
- 二叉树的层序遍历—leetcode102
- linux 6.5桌面环境kde,CentOS 5/6 安装 GNOME 或 KDE 桌面
- java caller_js中的caller和callee属性
- GNU make manual 翻译(三十八)
- JavaScript创建页面节点
- poj_3468 伸展树
- 阿里云最新虚拟化研发岗招聘
- 软件工程——背单词软件对比
- css flex 布局 space-around 和 space-evenly 之间的区别css flex布局）
- vue + element-ui本地下载图片
- 表的创建（create），修改（alter）和删除(drop)
- 电商运营中的五个数据陷阱
- 高德地图插件使用汇总（干货-从注册到熟练使用）
- 如何从型号判断NVR支持的接入路数和硬盘数？
热门文章
- 票据html模板,票据库.html · 胡凯锋/API_ML_AI_Note - Gitee.com
- iozone联机测试
- 自适应滤波器设计及matlab实现,[转载]自适应滤波器设计与MATLAB
- python excel公式计算_excel公式函数
- linux查询hba卡驱动版本,Linux下查看HBA卡的驱动版本和WWPN
- 单网口RFC2544测试——信而泰网络测试仪实操
- 宝德银河麒麟系统打印机安装及共享方法（一）
- 黄金分割法求极值 matlab,利用matlab实现黄金分割法求极值问题-北京理工大学-机械优化设计.doc...
- Arcgis一些操作
- Python基于机器视觉的图像风格迁移