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>

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;}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,});}
});

原生微信小程序自定义省市县三级联动(picker)相关推荐

  1. 原生微信小程序自定义组件以及组件间通讯

    文章目录 前言 一.新建组件 二.文件介绍 1.index.json 2.index.js 三.在父组件中引入子组件 四.父子组件通讯 属性绑定 事件绑定 获取组件实例 总结 前言 当我们在开发项目时 ...

  2. 原生微信小程序自定义键盘(仿原生键盘)

    wxml <view class="page_box" catchtap="hindKeyboard"><view class="i ...

  3. mpvue 微信小程序api_第三方框架与原生微信小程序开发框架性能之比较 | Q荐读...

    作者 | 崔红保编辑 | 王莹 自 2017年1月9日微信小程序诞生以来,历经 2 年多的迭代升级,已有数百万小程序上线,成为继 Web.iOS.Android 之后,第四大主流开发技术. 与之相随, ...

  4. 微信小程序自定义select下拉选择组件

    微信小程序自定义select下拉选择组件 微信小程序原生开发中,常用到的是从底部弹起的滚动选择器(picker),而有些项目需要用到下拉选择,话不多说,下面就可以把下拉选择封装成一个自定义组件: 1. ...

  5. 原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)

    本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下 实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 "navigationSt ...

  6. 微信自定义tabbar有小红点_微信小程序自定义 tabbar

    一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...

  7. 微信小程序自定义类似微信联系人组件

    微信小程序自定义联系人弹窗 在小程序项目中需要有一个选择人员项,想着看着好看一些,所以做成类似微信联系人的界面,由于本人是后端人员,效果不是特别好看,ui使用的是weui 效果图如下: 使用的是小程序 ...

  8. 微信小程序自定义导航栏返回和标题

    1.新建组件 index.json {"component": true } navbar.wxss //navbar.wxss .navbar{width: 100%;//设置导 ...

  9. 微信小程序-自定义导航栏

    微信小程序-自定义导航栏 第一步 添加属性 "navigationStyle": "custom" 第二步 自定义导航栏 第二步 自定义组件 第四步 使用组件 ...

最新文章

  1. 4月29日监理师课程作业
  2. VMM2012应用指南之2- 准备VMM2012虚拟机
  3. JavaScript中window.open用法实例详解
  4. SORT,DELETE ADJACEN DUPLICATES FROM保留有效数据
  5. matlab的compass怎么用,Compass用法指南
  6. boost::histogram::algorithm::project用法的测试程序
  7. test - delete category 060 in X3C - R3MATCLASS and perform customizing download
  8. 【转载】Swift属性Property
  9. Cannot retrieve mapping for action
  10. mysql批量插入 增加参数_MySql 的批量操作,要加rewriteBatchedStatements参数
  11. clickhouse 同步mysql_ClickHouse和他的朋友们(11)MySQL实时复制之GTID模式
  12. `object.__new__`应用
  13. Palo Alto Networks 支持仪表盘漏洞泄露数千份客户支持工单
  14. 黑客都是使用哪些方法入侵我们电脑的
  15. python discover()没有加载测试用例_Python系统学习 - Unittest
  16. 【三维路径规划】基于matlab遗传算法无人机三维路径规划【含Matlab源码 1526期】
  17. 微信小程序制作全流程(1)
  18. 高级气泡图——R语言简单实现
  19. 【python】自动登录51cto家园
  20. 安卓修改电池容量教程_手机电池校正 - 安卓最精确的电量校正方法 - iTeknical

热门文章

  1. 数码喷墨印花和传统印花的比较
  2. Tomcat之NIO和APR性能对比
  3. flinto导出html,Sketch绝佳搭配!30秒制作交互原型的次时代神器Flinto
  4. SwiftUI——推送通知(Notifications)二三事
  5. DNS劫持详解、如何使用网站监控检测dns劫持和网络劫持的特征
  6. 多维欧氏距离 余弦相似度 余弦距离 向量求模(范数)计算 pytorch实现
  7. solidworks下载资源
  8. 2023年春招热门面试八股文(C++)
  9. PMBOK第六版与第五版的区别
  10. 【再读第六版PMBOK】第三章 项目经理的角色