Application Scenario
Allows the user to select their current location and preferred location. It can be used to provide users with special food, nearby movie theaters, surrounding environment, etc. based on the location selected by the user.
Renderings show
video
Three-level linkage of Alipay provinces and cities
picture
Code
Click the button button to make it pop up. The user can select a location in the pop-up box, and after selection, it will be displayed in the third view tag select .
The HTML code is as follows:
<view class="page-description">支付宝小程序省市区三级联动</view>
<button type="primary" @click="openMultiLevelSelect">按钮</button>
<view>{
{select}}</view>
The JavaScript code is as follows:
provinceAndCity.js data is placed at the end of the text
//数据放在文末，安装你的文件位置引入即可
import provinceData from "@/pages-me/FacialRecognition/provinceAndCity.js"
export default {
data() {
return {
data: provinceData.data,//数据放在文末
select:''
}
},
methods: {
openMultiLevelSelect() {
my.multiLevelSelect({
title: '请选择位置', //级联选择标题
list: this.data, //级联数据列表
success: (res) => {
console.log('省市区三级联动：',res)
this.select=`您选择了 ${
res.result[0].name}>${
res.result[1].name}>${
res.result[2].name}`
my.alert({
content: `您选择了 ${
res.result[0].name}>${
res.result[1].name}>${
res.result[2].name}`
})
}
});
}
},
}
The main code explains my.multiLevelSelect
The following is moved from the official website to explain haha:
Introduction
my.multiLevelSelect is the cascade selection function API. It is mainly used to select multi-level associated data, such as the information selection of provinces and cities.
Usage restrictions
This API supports personal Alipay applets and enterprise Alipay applets.
Input parameter
The input parameter is Object type, and the parameters are as follows:
The data in the list is ready for everyone. put at the end of the article
provinceAndCity.js provincial data (free)
The data file is under review. If the upload is successful, I will put it at the end of the article. If you need the data urgently, you can also comment on it or private message me. The first time I used it, I didn't know how to do it. Screenshots as evidence hahahaha