当前位置: 首页 > 微信相关

小程序怎么制作三级联动选择器

发布日期:2020-08-12 09:08:16 分类:微信相关 阅读()来源:网络收集

好东西要多分享:

做网站就上魔艺客
摘要:小程序开发中可以使用组件制作三级联动选择器。借助picker组件可以很便捷的帮我们实现省市区等联动

在使用移动端产品时特定的应用会采用联动选择期,一来可以给用户好的使用体验,同时排除用户错误的输入方式。联动器有二级的,也有多级的,其中下级选择器会根据上级的不同而提供不同的选则,小程序开发中可以使用组件制作三级联动选择器。

借助picker组件可以很便捷的帮我们实现省市区、日期时间、多列选择器。微信官方的介绍中,picker组件能从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。通过实例创建一个地域数据的三级联动选择器便于理解:

交互

首先用户点击选择购车门店按钮,选择省级地区,然后通过选择的省级key充当查询条件获取市级数据,然后用选择市级后的key查询门店数据。


数据结构

后端的数据结构如下:



我们使用每条数据的value用来显示,使用key 来进行请求,最后获取到选择的门店key,然后进行保存即可。

WXML文件:


请选择

{{multiArray[2][multiIndex[2]]}}


1、mode=multiSelector用来声明创建的是多列选择器

2、value={{multiIndex}} multiIndex也是数组,用来表示选择的多维数组的每一项的第几个

3、picker组件用来创建一个从底部弹起的滚动选择器

4、bindchangevalue改变触发的事件,bindcolumnchange每一列值改变时候触发的事件

5、range={{multiArray}} multiArray就是我们的多维数组,这次我们用来放置数据所有的名字

bindcolumnchange

bindcolumnchange用来绑定每一列值改变时候触发的事件。

columnchange(e){

console.log(e.detail) //{column: 2, value: 1}

switch(e.detail.column) { // 此时的改变列数

case 0:

// 处理逻辑

break;

case 1:

// 处理逻辑

break;

}

this.setData({

// 更新数据

})

}

column 的值表示改变了第几列(下标从0开始),value 的值表示变更值的下标

bindchange

bindchange用来绑定value改变触发的事件。

pickchange(e){ // picker发送选择改变时候触发 通过e.detail.value获取携带的值 console.log(e.detail.value) // [0,1,2] this.setData({

multiIndex:e.detail.value // 直接更新即可

})

}

逻辑

缕下思路,实现起来大体分为以下几步:

1、加载省级数据,处理后放置在multiArray里面,存储下原始数据并用第一个数据的key请求市级数据,拿到市级数据后做同样操作,门店同理。

2、编写columnchangepickchange函数,用来处理选择器更改时候的操作。

3、页面加载后,调用获取省级数据的函数,这个函数自己会去拿市级和门店的数据。

使用picker组件实现多列选择器还是很简单的,我们只需要将处理逻辑放在高大威猛的bindcolumnchange里面就行了。可以将一些公用的函数封装在Util文件里面,如上面代码的ajax就是放在里面的。


推荐阅读:聊天室小程序制作了解session 微信小程序开发教程


声明: 文章内容及图片部分全部摘自网络,在此分享供读者参考和借鉴,不代表酷雷的观点。文章、图片等内容如涉嫌侵权,请联系我们删除,谢谢!带有原创标签的属于酷雷原创文章,未经允许不得转载!

标签:

我要说一说

加载中~

相关推荐

您好,很高兴为您服务!
广告合作
投诉建议
联系站长

客服热线:15821432298

扫码加好友,优惠等你来!