微信小程序官网只提供了省市区的三级联动,实际开发中更多的是自定义的多级联动:

依照微信小程序官网提供的自定义多级联动,需要使用到picker 的多列选择器,即设置 mode = multiSelector

https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

在网上也找了资料,代码都太繁琐,并且对于频繁变化的数据,非常不好维护;

代码在git上有:https://github.com/jonyellow/code-diary/blob/master/%E5%B0%8F%E7%A8%8B%E5%BA%8F/picker/index.vue

直接上代码,便于大家用:

1  html代码:

  <view class="section">
  <view class="section__title">多列选择器</view>
  <picker mode="multiSelector" @columnchange="changeNextCol" :value="mulIndex" :range="mulArr">
    <view class="picker">
      当前选择:{{mulArr[0][mulIndex[0]]}},{{mulArr[1][mulIndex[1]]}},{{mulArr[2][mulIndex[2]]}}
    </view>
  </picker>
</view>
2  data中return的数据
     mulIndex: [0,0,0],
       mulArr:[],
      // 假设json为后端返回的数据
      json: [{type:'汽车', brand:[{name:'领克',cars:['01', '02', '03']},
                                      {name:'丰田',cars:['汉兰达','凯美瑞', '卡罗拉']}]},
                {type:'摩托车',brand:[{name:'雅马哈',cars:['MT-9','迅鹰']},
                                       {name:'铃木',cars:['钻豹','gw250']}]},
                {type:'自行车',brand:[{name:'美利达',cars:['挑战者300', '挑战者900']},
                                      {name:'捷安特',cars:['ATX777','XTR']}]}]
3  由于 mulArr中没有数据,页面加载后是没有选项的,所以需要在onLoad是给mulArr加入数据
   onLoad () {
      // 初始化picker默认值
      this.mulArr[0] = this.json.map(function(v){return v.type});
      this.mulArr[1] = this.json[this.mulIndex[0]].brand.map(function(v){return v.name});
      this.mulArr[2] = this.json[this.mulIndex[0]].brand[this.mulIndex[1]].cars;
    }
4  关键的地方在于监听用户对列的改变   changeNextCol 函数
      changeNextCol(e){
        // 列的值改变时触发   我这里是三列:车子类型  品牌名称  车型
        console.log('修改的列', e.target.column, '值为', e.target.value);
        // 监听用户操作,改变mulIndex的值
        this.mulIndex[e.target.column] = e.target.value;
        // mulArr[0]的值是不会随用户操作变更的,因此不需要改变  
        // mulArr[1]的值是由 mulIndex[0]的值决定的
        this.mulArr.splice(1,1,this.json[this.mulIndex[0]].brand.map(function(v){return v.name}));
        // mulArr[2]的值是由 muIndex[1]的值决定的 
        this.mulArr.splice(2,1,this.json[this.mulIndex[0]].brand[this.mulIndex[1]].cars);
        }
实际效果:

 
 
 
 
 
 
 
 
 

mpvue + 微信小程序 picker 实现自定义多级联动 超简洁的更多相关文章

  1. 微信小程序picker组件 - 省市二级联动

    picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接 由于项目需 ...

  2. 微信小程序页面调用自定义组件内的事件

    微信小程序页面调用自定义组件内的事件 page page.json { "usingComponents": { "my-component": ". ...

  3. mpvue微信小程序http请求终极解决方案-fly.js

    fly.js是什么? 一个支持所有JavaScript运行环境的基于Promise的.支持请求转发.强大的http请求库.可以让您在多个端上尽可能大限度的实现代码复用(官网解释) fly.js有什么特 ...

  4. 微信小程序picker组件两列关联使用方式

    在使用微信小程序picker组件时候,可以设置属性   mode = multiSelector   意为多列选择,关联选择,当第一列发生改变时侯,第二列甚至第三列发生相应的改变.但是官方文档上给的只 ...

  5. 微信小程序底部实现自定义动态Tabbar

    多图警告!!! 最近在工作中遇到这样一个需求:微信小程序底部的Tab需要通过判断登录人的角色动态进行改变,想要实现这个功能依靠小程序原生的Tabbar是不可能实现的了,所以研究了一下自定义Tab,这里 ...

  6. mpvue微信小程序多列选择器用法:实现省份城市选择

    前言 微信小程序默认给我们提供了一个省市区的picker选择器,只需将mode设置为region即可 <picker mode="region" bindchange=&qu ...

  7. 微信小程序picker组件关于objectArray数据类型绑定

    一.前言: 我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = multiSelector 无法实现Object Array数据类型的绑定,其实很多人就想 ...

  8. 微信小程序分享支持自定义封面图

    微信小程序又发布更新了,刚好昨天支付宝也发布小程序,不能让它抢了风头的节奏.微信小程序主要更新如下:“小程序分享支持自定义封面图,公众号及小程序客服可发送小程序卡片.同时,我们还开放了获取发票抬头,指 ...

  9. 微信小程序——picker通过value返回你想获取的值

    关于微信小程序中的picker使用方法可以访问:picker-小程序 从它的官方文档中,可以看出它返回的value值是它range的下标: 在项目中,我们大多数时候传的值并不是需要这个下标,而是其他的 ...

随机推荐

  1. java使用jconsole查看java程序运行(jmx原理)

    在JVM启动参数上加上     java -Dcom.sun.management.jmxremote.port=8999     -Dcom.sun.management.jmxremote.aut ...

  2. Windows Qt 项目中文乱码

    在头文件中加入 #if _MSC_VER >= 1600 #pragma execution_character_set("utf-8") #endif

  3. Java 检查IPv6地址的合法性

    Java 检查IPv6地址的合法性 由于IPv4资源即将耗尽,IPv6将要正式启用,这是大势所趋. 一些现有的服务和应用逐步要对IPv6支持,目前还处在过渡阶段. 提前了解一些IPv6的知识,还是有必 ...

  4. [!] The version of CocoaPods used to generate the lockfile (1.4.0.beta.1) is higher than the version of the current executable (1.3.0.beta.1). Incompatibility issues may arise.

    今天在看一个开源Demo代码的时候,需要执行pod install命令,直接报错如下: 解决方法: 执行:pod update 命令更新资源库即可.

  5. SpringBoot: 18.使用Scheduled 定时任务器(转)

    Scheduled 定时任务器:是 Spring3.0 以后自带的一个定时任务器. 1.在pom.xml文件中添加Scheduled依赖 <!-- 添加spring定时任务 Scheduled ...

  6. 【机器学习】sigmoid函数求导 手写过程

  7. 【ARM-Linux开发】arm-none-Linux-gnueabi-gcc下载安装

    arm-none-Linux-gnueabi-gcc是 Codesourcery 公司(目前已经被Mentor收购)基于GCC推出的的ARM交叉编译工具.可用于交叉编译ARM系统中所有环节的代码,包括 ...

  8. Spring switch的使用

    首先在html开始标签中引入一个属性 1 xmlns:th="http://www.thymeleaf.org" 示例代码 <div th:switch="${us ...

  9. Guava源码阅读-collect-Multiset

    package com.google.common.collect; 我们在进行字符统计时,同常采用的方法就是: String[] text=new String[]{"the weathe ...

  10. 44.python排序算法(冒泡+选择)

    一,冒泡排序: 是一种简单的排序算法.它重复地遍历要排序的数列,一次比较两个,如果他们的排序错误就把他们交换过来. 冒泡排序是稳定的(所谓稳定性就是两个相同的元素不会交换位置) 冒泡排序算法的运作如下 ...