2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > 微信小程序中的省市区选择器

微信小程序中的省市区选择器

时间:2022-05-02 09:18:14

相关推荐

微信小程序中的省市区选择器

微信小程序中的省市区选择器的实现

在一些小程序中我们不伐会用到市区选择器,那它是如何实现的,下面展示一下,效果图。

首先在wxml这个文件中用到picker这个组件,picker是从底部加载的滚动选择器。

<picker mode="region" bindchange="getUserProvince"><view>选择的省份:<text wx:for="{{region}}">{{item}} </text></view></picker>

picker中加的mode属性确定picker是那中类型,有selector(普通选择器)、multiSelector(多列选择器)、date(日期选择器)、region(省市区选择器)。

这次用到的是region

在picker中有一个时间触发器叫做bindchange,这个触发器是当我们选择后触发的,后面是我自定义的一个函数,如果我想将数据展示到wxml页面上,下面展示一下js代码:

1.首先我们在data对象中设置一个命名为region的空数组

data: {region:[] //定义一个空数组用来存放选择地具体是哪一个省市区},

2.然后在page方法中写入我们自定义地函数:

getUserProvince:function(e){this.setData({region:e.detail.value//将用户选择的省市区赋值给region})},

这样就可以实现了。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。