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

最新推荐文章于 2022-11-29 15:40:18 发布
最新推荐文章于 2022-11-29 15:40:18 发布
阅读量461 收藏
点赞数
分类专栏： Vue mpvue 微信小程序 MpVue 微信小程序 文章标签： vue mpvue 微信小程序 多级联动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42221334/article/details/89489373
版权
本文介绍了如何在微信小程序中利用mpvue和Mpvue-WeUI组件实现多级联动功能。由于小程序官方并未提供直接的多级联动组件，开发者需要通过监听选择器的事件，动态设置各列数据。借助Mpvue-WeUI可以简化样式编写，提高开发效率。
摘要由CSDN通过智能技术生成

 先看效果：上图 

   

       看了一下小程序的开发文档，好像没有发现可以直接实现多级联动的组件或者可选的 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/

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

最低0.47元/天 解锁文章
就像风1样
关注
专栏目录
微信小程序级联筛选
08-10
需要的可已下载来看非常有用
微信小程序关联组件
前端御书房
11-23 1415
在父组件中引入behaviors注册为descendant即后代组件，target表示子节点所包含的behaviors，只要组件中的behaviors中含有parent就都会被关联为子组件。在子组件中引入父组件路径作为键，并配置type说明引入的组件是什么类型，parent表示父组件，即./parent/index路径的组件是当前组件的父组件。在父组件中引入子组件的路径作为键，并配置type说明引入的组件是什么类型，child表示子节点，即./child/index路径的组件是当前组件的子组件。
微信小程序--手写一个地区选择器（多级联动）
weixin_34123613的博客
09-13 1669
前言 通过微信小程序官方文档，我们可以看到表单组件中有picker这类滚动选择器。 现支持五种选择器，通过mode来区分，默认是普通选择器。 普通选择器 多列选择器 时间选择器 日期选择器 省市区选择器 需求场景：官方的地区选择器是三级联动，包括省市区，那如果业务场景是两级选择器，只需要省市呢？或者说，城市所对应的value值需要自定义呢？自己手写一个地区选择器会是一个不错的选择。废话不多说，...
微信小程序-自定义三级联动
ChibiMarukoChan的博客
05-31 8060
不像省市区可以直接使用小程序的组件，这边自己定义一个城市-维修站-人员的三级联动效果。 运用picker组件，设置mode 的合法值为multiSelector（多列选择器）； 其中range是一个二维数组，只要按二维数组格式[[],[],[]]填入数据即可。 <picker mode="multiSelector" bindchange="bindMultiPicker...
mpvue-picker:基于 mpvue 框架的小程序选择控件，支持单列，多列，联动
05-17
mpvue-picker 基于 mpvue 框架的小程序选择控件 支持单列、多列以及级联 目前版本为 2.0，1.0 使用请 citypicker 已支持，详情点击 前言 在 开源之初写了 。当时用的是小程序的原生组件，没有对其进行封装和组件化。而对于现在的前端开发环境，组件化，模块化，工程化以及自动化已经是一种标配。而mpvue框架又提供了一个很好的组件化开发平台，因此就对小程序中的 picker 组件进行封装，使其在用mpvue开发的时候能够用快速的实现 picker的功能。 :warning: 不是本人在维护，如果要在 uni-app 中使用的话推荐通过 npm 包的方式引入。 为什么封装 picker 组件 其实小程序提供了原生的 picker 组件，但是在开发的时候会发现在 android 手机上看到的 picker效果与微信开发者工具预览的效果不一样，其实就是丑了一点点... 在小程序中使用
微信小程序实现的picker多级联动功能示例
12-29
本文实例讲述了微信小程序实现的picker多级联动功能。分享给大家供大家参考，具体如下： wxml部分： bindchange=bindjobcatchange bindcolumnchange=bingjobcatcolumnchange value={{multiIndex}} range={{job...
详解mpvue开发微信小程序基础知识
10-16
主要介绍了详解mpvue开发微信小程序基础知识,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
基于mpvue搭建微信小程序项目框架的教程详解
10-17
MPVue 是一个基于 Vue.js 的小程序开发框架，它在底层全面支持 Vue.js 的语法和构建工具体系，使得开发者能够以更熟悉的方式来编写微信小程序，大大提高了开发效率。对于初涉小程序开发的人员来说，MPVue 提供了一个...
mpvue开发微信小程序用户登录功能的实现过程
一键写代码的博客
08-10 1315
资料预习： 1.一次性授权 常规写法，需要获取用户公开信息（头像，昵称等）时，判断调取授权登录接口，但是此方法如果不经处理的话 用户如果拒绝授权或者删除该微信小程序后 需要重新调取并获取用户公开信息（头像，昵称等），此方法用户体验较差，不建议使用； 2.永久授权 在不必要使用用户公开信息（头像，昵称等）时，不调取授权登录接口，只有在必要的时候再去判断调取授权登录接口并把获取到的用户公开信息存入数据库，这样在每次登录时直接先运行指定函数从数据库索取需要的用户公开信息（头像，昵称等）即可，此方法在删除小程
微信小程序picker多列选择器：四级联动
记录本人工作中遇到的问题、经验总结以及分享。
03-10 5040
【代码】小程序picker多列选择器：四级联动。
小程序城市级联
12-21
小程序城市级联，实现城市选择功能，亲测可以使用。
微信小程序之省市区三级联动自定义组件
Iterator_1993的博客
06-21 9037
最近一直在写小程序，上线以后老大告我，我们的地址选择只用地图来选择不能满足用户需求，还是得需要一个省市区选择器，好吧，本着用户是上帝，一切以用户用的爽为目的程序猿当然只能选择满足它了，于是就手动撸一个自定义组件省的以后折腾。关于自定义组件的概念定义我就不在这里赘述了，相信大家都已经阅读过文档了(文档写的还是很清楚的)，下面我就直接上效果图了：源码已经放在了github上，欢迎大家issue,git...
微信小程序中如何实现省市区街道四级地址级联选择
穆雄雄的博客
10-30 1723
微信小程序中支持省市区地址级联吗？微信小程序中的地址级联最多支持到几级？今天，我们就来看看，微信小程序中的地址级联的使用，以及一些坑…希望大家看完之后能避免踩坑啊。
微信小程序使用picker三级联动的问题
Yhj_520_DSY的博客
04-16 256
如何使用小程序内置的组件picker来渲染并进行联动呢 请大佬指教指教 请求的数据 省份的数据 城市的数据 县区的数据(部分数据 )
记录-微信小程序picker多级联动级别不固定-又是令人头冷的一天
yynikki的博客
11-25 760
先贴上需求,后台返回的值结构中既有2级、也有3级和4级的children，要求联动。像这种级别不固定的数据格式，微信小程序提供的picker组件无法支持，时间又不够自己任性造轮子；就找了几家主流的小程序组件框架研究一下，强烈推荐**wux-weapp**框架，这个框架的组件很多，附上级联文档[wux-weapp-cascader](https://wux-weapp.github.io/wux-weapp-docs/#/cascader?id=%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8
微信小程序自定义一个下拉框组件
最新发布
weixin_44085020的博客
11-29 795
微信小程序自定义一个下拉框组件
【微信小程序】微信小程序使用弹出框多级联动(示例)
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
04-19 1747
解决流程 wxml代码 <form catchsubmit="handleUserEdit" catchreset="handleUserReset"> <van-cell-group> <van-field bind:change="handleInputChange" bindtap="handleShowPicker"
微信小程序上拉框弹出菜单，select选择器——picker标签
MaYuKang的博客
09-22 5629
效果 从手机底部弹出上拉框，展示用户列表，通过滚动列表选择用户，点击确定选中。 wxml <picker bindchange="bindPickerChange" value="{{index}}" range='{{array}}' range-key="name" data-id='{{array[index].id}}' data-name='{{array[index].name}}' class="weui-btn btn-css" > 点我弹出选择器
八、picker用法 下拉框选择效果
Start_Simple的博客
07-28 623
picker用法 下拉框选择效果
mpvue开发微信小程序：从入门到实践
本文档深入讲解了mpvue开发微信小程序的基础知识，mpvue作为一个基于Vue.js的前端框架，专为微信小程序设计，提供了与Vue.js相似的开发体验。以下是主要内容的详细解析： 1. mpvue简介： - mpvue是专为微信小程序...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值