为了用户的便利,开发者们往往要投入更多的精力去完成一个功能。明明可以用输入框,所么简单,可非要去选择选择器,多么便利。为用户提供了便利,提高用户体验。
今天的主题就是地址选择器!
当然,这个还是用组件开发会比较快一点。小程序开发我一直都在用Vant组件,使用这个你的界面会容易很多实现。
如果你还没安装Vant,可以去官网查看安装,上面有安装命令。很简单。
安装完Vant,接下来我们就来完成地区选择器吧。
完成步骤:
- 配置路径
- 下载地区数据集
- 编写代码
- 实现
一、配置路径
安装完Vant,首先要在app.json中引入该模块。该功能需要的模块是area,因为我们还要做弹窗,所以还要引入弹出层popup。
"usingComponents": {
"van-popup": "@vant/weapp/popup/index", //修改自己的组件路径
"van-area": "@vant/weapp/area/index"
}
二、下载地址数据集
因为选择地址这种东西你不可能自己一个个把地址全部列出来,这是不现实的事情,如果你真有那个本事,当然你可以自己列出来,列出来之后用Picker选择器自己完成。
我们这里讲的是area地区选择器。
这里可以选择省市区、也可以选择省市,当然还有其他样式。我们这里只讲一种省市的选择,其他你就自己明白啦
下载数据集地址,你需要把这个area.js文件下载下来。
放进你的项目里面,随便一个地方都行。
三、编写代码
wxml:
<van-cell title="地址" is-link bind:click="showPopup" />
<van-popup
show="{{ show }}"
bind:close="onClose"
position="bottom"
custom-style="height: 50%;">
<van-area bind:confirm="onConfirm" bind:cancel="onCancel" area-list="{{ areaList }}" columns-num="{{ 2 }}" title="省市" />
</van-popup>
js:
import province_list from './area'; //导入地址数据集,根据你所存放的位置写路径
data: {
show: false,
},
onLoad(){
this.setData({
areaList:province_list
})
},
onClose() {
this.setData({ show: false });
},
onConfirm(event) {
console.log(event.detail.values[0].name)
console.log(event.detail.values[1].name)
this.setData({
show:false
})
},
onCancel() {
this.setData({ show: false });
},
四、实现
几个简单的步骤就轻松完成了地址的选择。
如果有问题,可以下面留言,看到之后第一时间回复。