支付宝实现省市区三级联动my.multiLevelSelect（附带省市区js数据）-Toy模板网

这篇具有很好参考价值的文章主要介绍了支付宝实现省市区三级联动my.multiLevelSelect（附带省市区js数据）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

应用场景

可以供用户选择所在位置、喜好位置。可用于根据用户所选位置给用户提供该位置的特色美食，附近的电影院，周边环境等。

效果图展示

视频

支付宝省市区三级联动

图片

支付宝实现省市区三级联动my.multiLevelSelect（附带省市区js数据）

代码实现

点击按钮button，让其弹框。用户可在弹框中选择位置，选中后让其显示在第三个view标签里select。

HTML代码如下：

<view class="page-description">支付宝小程序省市区三级联动</view>
<button type="primary" @click="openMultiLevelSelect">按钮</button>
<view>{{select}}</view>

JavaScript代码如下：

provinceAndCity.js数据放在文末

//数据放在文末，安装你的文件位置引入即可
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}`
					})
				}
			});
		}
	},
}

主要代码讲解my.multiLevelSelect

以下从官网搬来讲解哈哈：

简介
my.multiLevelSelect 是级联选择功能 API。主要用于选择多级关联数据，例如省市区的信息选择。

使用限制
此 API 支持个人支付宝小程序、企业支付宝小程序使用。

入参
入参为 Object 类型，参数如下：
支付宝实现省市区三级联动my.multiLevelSelect（附带省市区js数据）
list里的数据为大家准备好了。放在文章末尾

provinceAndCity.js省市区数据（免费）

数据文件在审核当中，上传成功我会放在文末，如果急需数据也可以评论区或者私信我。第一次使用，不太会搞。截图为证哈哈哈哈支付宝实现省市区三级联动my.multiLevelSelect（附带省市区js数据）文章来源地址https://www.toymoban.com/news/detail-486871.html