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

依照微信小程序官网提供的自定义多级联动,需要使用到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. 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_4.RabbitMQ研究-安装RabbitMQ

    RabbitMQ由Erlang语言开发,Erlang语言用于并发及分布式系统的开发,在电信领域应用广泛,OTP(Open Telecom Platform)作为Erlang语言的一部分,包含了很多基于 ...

  2. 灵活配置tomcat根目录网站

    <Host name="localhost" appBase="webapps" unpackWARs="true" autoDepl ...

  3. [C++]哈夫曼树(最优满二叉树) / 哈夫曼编码(贪心算法)

    一 哈夫曼树 1.1 基本概念 算法思想 贪心算法(以局部最优,谋求全局最优) 适用范围 1 [(约束)可行]:它必须满足问题的约束 2 [局部最优]它是当前步骤中所有可行选择中最佳的局部选择 3 [ ...

  4. 如何解决docker 官方镜像拉取慢的问题

    转自: http://skycity.today/?thread-307.htm 国内从 docker 官方 Registry 拉取 image 慢的解决,步骤如下: 1.注册一个阿里云账号. 2.阿 ...

  5. NOIp2012:借教室

    题目描述 在大学期间,经常需要租借教室.大到院系举办活动,小到学习小组自习讨论,都需要向学校申请借教室.教室的大小功能不同,借教室人的身份不同,借教室的手续也不一样. 面对海量租借教室的信息,我们自然 ...

  6. 2019牛客多校赛第一场 补题 I题

    I题  Points Division 题意: 给你n个点,每个点有坐标(xi,yi)和属性(ai,bi),将点集划分为两个集合, 任意 A 集合的点 i 和 B 集合点 j, 不允许 xi > ...

  7. 《Tsinghua oc mooc》第5~7讲 物理内存管理

    资源 OS2018Spring课程资料首页 uCore OS在线实验指导书 ucore实验基准源代码 MOOC OS习题集 OS课堂练习 Piazza问答平台 暂时无法注册 疑问 段式内存管理中,逻辑 ...

  8. 《PC Assembly Language》读书笔记

    本书下载地址:pcasm-book. 前言 8086处理器只支持实模式(real mode),不能满足安全.多任务等需求. Q:为什么实模式不安全.不支持多任务?为什么虚模式能解决这些问题? A: 以 ...

  9. fcntl和flock两个系统调用的区别

    总的来说,flock函数只能锁定整个文件,无法锁定文件的某一区域.而fcntl可以利用struct flock结构体,来实现文件里部分区域锁定的操作. 附:fcntl(文件描述词操作) 相关函数 op ...

  10. mysql导入数据报错:Incorrect datetime value

    incorrect datetime value 报错信息如下图: 意思很明显是说,'0000-00-00 00:00:00'不是一个有效的日期类型的值 解决办法: sql_mode 中删除 NO_Z ...