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

依照微信小程序官网提供的自定义多级联动,需要使用到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. P2328 [SCOI2005]超级格雷码

    P2328 [SCOI2005]超级格雷码 暴力出奇迹喵! 这是一道模拟题 你会发现和 P5657 格雷码[民间数据]有异曲同工之妙,这道题直接按照上边链接题目的操作步骤 暴力模拟 就可以啊 我们观察 ...

  2. Robot Framework 学习资源汇总

    学习网站 http://robotframework.org/ http://www.testtao.cn/?cat=43 https://www.jianshu.com/c/483e8ffcbc79 ...

  3. 【403】COMP9024 Exercise

    Week 1 Exercises fiveDigit.c There is a 5-digit number that satisfies 4 * abcde = edcba, that is,whe ...

  4. PAT 甲级 1027 Colors in Mars (20 分)(简单,进制转换)

    1027 Colors in Mars (20 分)   People in Mars represent the colors in their computers in a similar way ...

  5. pycharm连接linux版python

    1.建立连接 2.测试连接 3.同步目录 4.查看同步的目录 5.设置永久同步目录 6.设置连接 可以看到添加进来了 参照文档: https://www.cnblogs.com/xiao-apple3 ...

  6. 免费好用的 Apple 工具(Windows 适用)

    首先,下载链接: https://pan.baidu.com/s/1Sfx3SB8Ya1aMS01aXk--rA 密码: 6y69 1. Airplay (itools) : ios 可以投屏到win ...

  7. Unity 实现橡皮擦效果

    我所实现的橡皮擦效果是设置图片某点的像素的透明度为0,来简单实现擦除效果的: 下面是效果 首先需要注意两点:1:设置 Main Camera 的 projection 属性为Orthographic ...

  8. PJzhang:docker基础知识的2个疗程-one

    猫宁!!! 参考:http://virtual.51cto.com/art/201805/572135.htm https://www.cnblogs.com/rkit/p/9237696.html ...

  9. 经典卷积神经网络——AlexNet

    一.网络结构 AlexNet由5层卷积层和3层全连接层组成. 论文中是把网络放在两个GPU上进行,为了方便我们仅考虑一个GPU的情况. 上图中的输入是224×224224×224,不过经过计算(224 ...

  10. Hyperledger Fabric 常用命令

    Peer常用命令: #peer chaincode --help #peer channel list --help --logging-level <string> #<strin ...