微信小程序picker 组件自定义三级联动

1、picker.wxml

<!--pages/picker/picker.wxml-->
<view><view class="section__title">多列选择器</view><picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange"value="{{multiIndex}}" range="{{newArr}}"><view class="picker">当前选择： <van-button type="primary">{{newArr[0][multiIndex[0]]}}，{{newArr[1][multiIndex[1]]}}，{{newArr[2][multiIndex[2]]}}</van-button></view></picker>
</view>

2、picker.js

// pages/picker/picker.js
Page({/*** 页面的初始数据*/data: {multiArray: [{id: 1,label: "东南",children: [{id: 2,label: "上海",children: [{id: 3,label: "普陀",},{id: 4,label: "黄埔",},{id: 5,label: "徐汇",},],},{id: 7,label: "江苏",children: [{id: 8,label: "南京",},{id: 9,label: "苏州",},{id: 10,label: "无锡",},],},{id: 12,label: "浙江",children: [{id: 13,label: "杭州",},{id: 14,label: "宁波",},{id: 15,label: "嘉兴",},],},],},{id: 17,label: "西北",children: [{id: 18,label: "陕西",children: [{id: 19,label: "西安",},{id: 20,label: "延安",},],},{id: 21,label: "新疆维吾尔族自治区",children: [{id: 22,label: "乌鲁木齐",},{id: 23,label: "克拉玛依",},],},],},],multiIndex: [0, 0, 0],multiIds: [],newArr: [],},bindMultiPickerChange(e) {console.log(this.data.multiIds);},bindMultiPickerColumnChange(e) {let data = {newArr: this.data.newArr,multiIndex: this.data.multiIndex,multiIds: this.data.multiIds,};data.multiIndex[e.detail.column] = e.detail.value;let searchColumn = () => {let arr1 = [];let arr2 = [];this.data.multiArray.map((v, vk) => {if (data.multiIndex[0] === vk) {data.multiIds[0] = {...v,};v.children.map((c, ck) => {arr1.push(c.label);if (data.multiIndex[1] === ck) {data.multiIds[1] = {...c,};c.children.map((t, vt) => {arr2.push(t.label);if (data.multiIndex[2] === vt) {data.multiIds[2] = {...t,};}});}});}});data.newArr[1] = arr1;data.newArr[2] = arr2;};switch (e.detail.column) {case 0:// 每次切换还原初始值data.multiIndex[1] = 0;data.multiIndex[2] = 0;// 执行函数处理searchColumn();break;case 1:data.multiIndex[2] = 0;searchColumn();break;case 2:searchColumn();break;}this.setData(data);},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {let state = {arr: [],arr1: [],arr2: [],arr3: [],multiIds: []}this.data.multiArray.map((v, vk) => {state.arr1.push(v.label);if (this.data.multiIndex[0] === vk) {state.multiIds[0] = v;}if (state.arr2.length <= 0) {v.children.map((c, ck) => {state.arr2.push(c.label);if (this.data.multiIndex[1] === ck) {state.multiIds[1] = c;}if (state.arr3.length <= 0) {c.children.map((t, tk) => {state.arr3.push(t.label);if (this.data.multiIndex[2] === tk) {state.multiIds[2] = t;}});}});}});state.arr[0] = state.arr1;state.arr[1] = state.arr2;state.arr[2] = state.arr3;this.setData({newArr: state.arr,multiIds: state.multiIds,});},});

后端数据要求数组对象格式，给的不对自己foechar修改。cv进模板就能用，若是二级，则取消第三次的map就可以。多consloe.log就会用了

微信小程序picker 组件自定义三级联动相关推荐

微信小程序picker组件 - 省市二级联动及其回显
picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接由于项目需 ...
微信小程序picker组件 - 省市二级联动
picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接由于项目需 ...
实现微信小程序picker 省市区自定义数据支持三级联动
再使用微信小程序时发现当 mode="region" 时数据选择的省市区的数据不支持后台返回的数据以下实现后台返回数据操作先设置HTML name 字段名字要替换掉 ...
微信小程序picker组件实现多列选择器
[微信小程序]picker组件多列选择器的使用功能需求用微信小程序的多列选择器实现对一个树状结构图中的末节点的选择,要求选择器的第一列改变时,后面列的选项会联动改变.树状结构图的部分数据如下图; ...
微信小程序picker组件仅点击其中的内容才会触发事件
微信小程序包括picker组件在内的好多组件默认情况下只有点击其中的文字内容才可以触发相应的事件:例如下图的性别一栏,默认情况下只有点击红色区域的"男"字才能触发picker绑定的 ...
微信小程序picker组件
在小程序的开发应用中,我们会经常用到picker组件. 官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/picker.h ...
微信小程序picker组件的确认，取消按钮方法
确定 bindchange 取消 bindcancel <picker mode="date" header-text="选择时间" f ...
taro微信小程序时间组件picker的使用--省市区三级联动
微信小程序时间组件实现三级联动项目技术手段支撑 taro+react+scss实现的微信小程序 Picker使用说明相信大家在微信小程序开放文档里面已经学会了使用组件picker实现时间,和单列组 ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...

微信小程序picker 组件自定义三级联动

微信小程序picker 组件自定义三级联动相关推荐

最新文章

热门文章