先看效果：上图

看了一下小程序的开发文档，好像没有发现可以直接实现多级联动的组件或者可选的 API（如果有，请打醒我），不过它提供了自定义选择器的组件picker-view和picker-view-column，picker-view-column相当于是选择器的每一列，并且picker-view-column之间的数据都是独立的，而且picker-view提供了bindchange属性，那么就可以根据触发bindchange事件返回的值来判断哪一列发生了改变，从而再实时设置其他列的数据。这就是实现多级联动的思路。

但是感觉好麻烦，这里引用了 Mpvue-WeUI

Mpvue-WeUI https://mpcomponent.github.io/mpvue-weui/guide/

封装好的一些功能组件，省的去写样式了，基本都是微信小程序原生封装的，不止这一个组件挺好用的！

代码全↓↓↓↓

<template><div class="longinPage"><div class="plan_list" hover-class="weui-cell_active"> <div class="plan_name plan_Origin" @click="showMulLinkageTwoPicker">名称 &nbsp;&nbsp;&nbsp;{{plan_name}}</div><mp-picker ref="mpPicker" :mode="mode" :deepLength=deepLength :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm" :pickerValueArray="pickerValueArray"></mp-picker></div></div></template><script>
import mpPicker from 'mpvue-weui/src/picker';
export default {data () {return {mode: 'multiLinkageSelector',pickerValueArray: [{label: '猪',value: 100,children: [{label: '大猪',value: 101},{label: '小猪',value: 102}]},{label: '牛',value: 200,children: [{label: '奶牛',value: 210},{label: '耕牛',value: 202},{label: '花花牛',value: 203}]},{label: '羊',value: 300,children: [{label: '山羊',value: 301},{label: '绵羊',value: 302}]}],pickerValueDefault: [0, 0],}},components: {mpPicker,},mounted(){this.onLoad()},methods: {//标题onLoad:function(options){wx.setNavigationBarTitle({title: '提交计划'})},//名称显示2级联动showMulLinkageTwoPicker() {this.$refs.mpPicker.show();},//名称确定onConfirm(e) {this.plan_name=e.label},}
}
</script></style>

引用ui 后不需添加样式，其实这个就是封装好的！

mpvue开发微信小程序多级联动功能相关推荐

使用mpvue开发微信小程序——原生微信小程序、mpvue、wepy对比
mpvue是什么?为什么使用它? 目前小程序开发主要有三种形式:原生.wepy.mpvue,其中wepy是腾讯的开源项目:mpvue是美团开源的一个开发小程序的框架,全称mini program vu ...
使用mpvue开发微信小程序——音乐小程序项目源码分享
文章最后更新(2019-04-06) github最后更新(2019-04-09) 前言: 最近小组有个微信小程序分享的环节,于是在业余时间使用mpvue框架写了个音乐小程序,时间有限,之后有时间会继 ...
mpvue开发微信小程序，分享按钮报错：`Cannot read property 'apply' of null`
用mpvue开发微信小程序,分享按钮报错:Cannot read property 'apply' of null thirdScriptError Cannot read property 'app ...
IVX低代码平台开发——微信小程序实现抽奖功能
写在前面通过利用可视化编程实现微信小程序的抽奖功能,带大家初步了解 iVX 的强大之处. 文章目录写在前面 iVX开发抽奖功能实现 iVX开发基本介绍 iVX是一个 "零代码&quo ...
【直播报名】使用mpvue开发微信小程序的最佳实践
美团点评技术沙龙Online:美团点评技术团队推出的线上分享课程,每月2-3期,我们采用视频直播形式,邀请来自美团点评的技术专家,面向互联网技术从业人员,搭建线上技术分享平台,分享一线实战经验.欢迎关 ...
mpvue开发微信小程序踩坑笔记
在列表page点击进入详情页面时,用mounted()方法去获取数据去展示数据,但是有些数据需要在onShow()方法中调用,因为mpvue框架问题,所以在返回的时候如果不将data中定义的数据清除 ...
基于mpvue开发微信小程序，入门开发步骤
接下来..... 1. 初始化一个 mpvue 项目现代前端开发框架和环境都是需要 Node.js 的,如果没有的话,请先下载 nodejs 并安装. 然后打开命令行工具: # 1. 先检查下 No ...
用Mpvue开发微信小程序，微信语音聊天
1.github项目 https://github.com/F-loat/mpvue-quickstart 2.参考项目 github https://github.com/unmagic/wech ...
mpvue开发微信小程序之picker
微信使用picker组件,bingchange 换成@change即可使用监听函数和方法此处注意与微信多了一个mp的信息才能获取到选中的值. 获取当前日期+时间 function formatTim ...

mpvue开发微信小程序多级联动功能

代码全↓↓↓↓

mpvue开发微信小程序多级联动功能相关推荐

最新文章

热门文章