首页 >> js开发 >> js微信小程序实现选择地址省市区三级联动js大全
js微信小程序实现选择地址省市区三级联动js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
本文实例为大家分享了微信小程序实现选择地址省市区三级联动的具体代码，供大家参考，具体内容如下微信原生地址API，缺少省市区code，因此自己写了一个收货地址思路：在onload预先加载全部省和第一个省的全部市和区，加载全部会导致几秒的事件阻塞。点击选择地址弹窗后，按需加载操作，滑动省加载对应的市和第一个市对应的区，滑动市加载区，滑动区只更改区的值
onLoad: function(options) {
var that = this;
// 此文件为全部省以及第一个省的市和区
var cityData = districtLoad.districtLoad;
// 存放省
const provinces = [];
// 存放市
const citys = [];
// 存放区
const countys = [];
for (let i = 0; i < cityData.length; i++) {
provinces.push(cityData[i]);
}
for (let i = 0; i < cityData[0].sub.length; i++) {
citys.push(cityData[0].sub[i])
}
for (let i = 0; i < cityData[0].sub[0].sub.length; i++) {
countys.push(cityData[0].sub[0].sub[i])
}
that.setData({
provinces,
citys,
countys
})
}
onLoad: function(options) {
var that = this;
// 此文件为全部省以及第一个省的市和区
var cityData = districtLoad.districtLoad;
// 存放省
const provinces = [];
// 存放市
const citys = [];
// 存放区
const countys = [];
for (let i = 0; i < cityData.length; i++) {
provinces.push(cityData[i]);
}
for (let i = 0; i < cityData[0].sub.length; i++) {
citys.push(cityData[0].sub[i])
}
for (let i = 0; i < cityData[0].sub[0].sub.length; i++) {
countys.push(cityData[0].sub[0].sub[i])
}
that.setData({
provinces,
citys,
countys
})
}滑动省市区事件
bindChange: function(e) {
var that = this;
var val = e.detail.value
var t = this.data.values;
// 滑动省
if (val[0] != t[0]) {
const citys = [];
const countys = [];
// 保存市
for (let i = 0; i < cityData[val[0]].sub.length; i++) {
citys.push(cityData[val[0]].sub[i])
}
// 保存第一个市的全部区
for (let i = 0; i < cityData[val[0]].sub[0].sub.length; i++) {
countys.push(cityData[val[0]].sub[0].sub[i])
}
// 保存
this.setData({
province: cityData[val[0]].name,
city: cityData[val[0]].sub[0].name,
citys: citys,
countys: countys,
values: val,
value: [val[0], 0, 0],
fdeliveryProvince: this.data.provinces[val[0]].code,
fdeliveryCity: cityData[val[0]].sub[0].code,
})
// 防止只有省市的情况
if (cityData[val[0]].sub[0].sub.length!=0){
that.setData({
county: cityData[val[0]].sub[0].sub[0].name,
fdeliveryArea: cityData[val[0]].sub[0].sub[0].code
})
}else {
that.setData({
county: '',
fdeliveryArea:''
})
}
return;
}
// 滑动市
if (val[1] != t[1]) {
const countys = [];
// 保存市
for (let i = 0; i < cityData[val[0]].sub[val[1]].sub.length; i++) {
countys.push(cityData[val[0]].sub[val[1]].sub[i])
}
// 保存
this.setData({
city: this.data.citys[val[1]].name,
countys: countys,
values: val,
value: [val[0], val[1], 0],
fdeliveryCity: this.data.citys[val[1]].code,
})
// 防止只有省市的情况
if (countys.length != 0) {
that.setData({
county: cityData[val[0]].sub[val[1]].sub[0].name,
fdeliveryArea: cityData[val[0]].sub[val[1]].sub[0].code
})
} else {
that.setData({
county: '',
fdeliveryArea: ''
})
}
return;
}
// 滑动区
if (val[2] != t[2]) {
this.setData({
county: this.data.countys[val[2]].name,
values: val,
fdeliveryArea: this.data.countys[val[2]].code
})
return;
}
}
bindChange: function(e) {
var that = this;
var val = e.detail.value
var t = this.data.values;
// 滑动省
if (val[0] != t[0]) {
const citys = [];
const countys = [];
// 保存市
for (let i = 0; i < cityData[val[0]].sub.length; i++) {
citys.push(cityData[val[0]].sub[i])
}
// 保存第一个市的全部区
for (let i = 0; i < cityData[val[0]].sub[0].sub.length; i++) {
countys.push(cityData[val[0]].sub[0].sub[i])
}
// 保存
this.setData({
province: cityData[val[0]].name,
city: cityData[val[0]].sub[0].name,
citys: citys,
countys: countys,
values: val,
value: [val[0], 0, 0],
fdeliveryProvince: this.data.provinces[val[0]].code,
fdeliveryCity: cityData[val[0]].sub[0].code,
})
// 防止只有省市的情况
if (cityData[val[0]].sub[0].sub.length!=0){
that.setData({
county: cityData[val[0]].sub[0].sub[0].name,
fdeliveryArea: cityData[val[0]].sub[0].sub[0].code
})
}else {
that.setData({
county: '',
fdeliveryArea:''
})
}
return;
}
// 滑动市
if (val[1] != t[1]) {
const countys = [];
// 保存市
for (let i = 0; i < cityData[val[0]].sub[val[1]].sub.length; i++) {
countys.push(cityData[val[0]].sub[val[1]].sub[i])
}
// 保存
this.setData({
city: this.data.citys[val[1]].name,
countys: countys,
values: val,
value: [val[0], val[1], 0],
fdeliveryCity: this.data.citys[val[1]].code,
})
// 防止只有省市的情况
if (countys.length != 0) {
that.setData({
county: cityData[val[0]].sub[val[1]].sub[0].name,
fdeliveryArea: cityData[val[0]].sub[val[1]].sub[0].code
})
} else {
that.setData({
county: '',
fdeliveryArea: ''
})
}
return;
}
// 滑动区
if (val[2] != t[2]) {
this.setData({
county: this.data.countys[val[2]].name,
values: val,
fdeliveryArea: this.data.countys[val[2]].code
})
return;
}
}html
取消
确定
{{item.name}}
{{item.name}}
{{item.name}}
取消
确定
{{item.name}}
{{item.name}}
{{item.name}}
onLoad: function(options) {
var that = this;
// 此文件为全部省以及第一个省的市和区
var cityData = districtLoad.districtLoad;
// 存放省
const provinces = [];
// 存放市
const citys = [];
// 存放区
const countys = [];
for (let i = 0; i < cityData.length; i++) {
provinces.push(cityData[i]);
}
for (let i = 0; i < cityData[0].sub.length; i++) {
citys.push(cityData[0].sub[i])
}
for (let i = 0; i < cityData[0].sub[0].sub.length; i++) {
countys.push(cityData[0].sub[0].sub[i])
}
that.setData({
provinces,
citys,
countys
})
}
onLoad: function(options) {
var that = this;
// 此文件为全部省以及第一个省的市和区
var cityData = districtLoad.districtLoad;
// 存放省
const provinces = [];
// 存放市
const citys = [];
// 存放区
const countys = [];
for (let i = 0; i < cityData.length; i++) {
provinces.push(cityData[i]);
}
for (let i = 0; i < cityData[0].sub.length; i++) {
citys.push(cityData[0].sub[i])
}
for (let i = 0; i < cityData[0].sub[0].sub.length; i++) {
countys.push(cityData[0].sub[0].sub[i])
}
that.setData({
provinces,
citys,
countys
})
}滑动省市区事件
bindChange: function(e) {
var that = this;
var val = e.detail.value
var t = this.data.values;
// 滑动省
if (val[0] != t[0]) {
const citys = [];
const countys = [];
// 保存市
for (let i = 0; i < cityData[val[0]].sub.length; i++) {
citys.push(cityData[val[0]].sub[i])
}
// 保存第一个市的全部区
for (let i = 0; i < cityData[val[0]].sub[0].sub.length; i++) {
countys.push(cityData[val[0]].sub[0].sub[i])
}
// 保存
this.setData({
province: cityData[val[0]].name,
city: cityData[val[0]].sub[0].name,
citys: citys,
countys: countys,
values: val,
value: [val[0], 0, 0],
fdeliveryProvince: this.data.provinces[val[0]].code,
fdeliveryCity: cityData[val[0]].sub[0].code,
})
// 防止只有省市的情况
if (cityData[val[0]].sub[0].sub.length!=0){
that.setData({
county: cityData[val[0]].sub[0].sub[0].name,
fdeliveryArea: cityData[val[0]].sub[0].sub[0].code
})
}else {
that.setData({
county: '',
fdeliveryArea:''
})
}
return;
}
// 滑动市
if (val[1] != t[1]) {
const countys = [];
// 保存市
for (let i = 0; i < cityData[val[0]].sub[val[1]].sub.length; i++) {
countys.push(cityData[val[0]].sub[val[1]].sub[i])
}
// 保存
this.setData({
city: this.data.citys[val[1]].name,
countys: countys,
values: val,
value: [val[0], val[1], 0],
fdeliveryCity: this.data.citys[val[1]].code,
})
// 防止只有省市的情况
if (countys.length != 0) {
that.setData({
county: cityData[val[0]].sub[val[1]].sub[0].name,
fdeliveryArea: cityData[val[0]].sub[val[1]].sub[0].code
})
} else {
that.setData({
county: '',
fdeliveryArea: ''
})
}
return;
}
// 滑动区
if (val[2] != t[2]) {
this.setData({
county: this.data.countys[val[2]].name,
values: val,
fdeliveryArea: this.data.countys[val[2]].code
})
return;
}
}
bindChange: function(e) {
var that = this;
var val = e.detail.value
var t = this.data.values;
// 滑动省
if (val[0] != t[0]) {
const citys = [];
const countys = [];
// 保存市
for (let i = 0; i < cityData[val[0]].sub.length; i++) {
citys.push(cityData[val[0]].sub[i])
}
// 保存第一个市的全部区
for (let i = 0; i < cityData[val[0]].sub[0].sub.length; i++) {
countys.push(cityData[val[0]].sub[0].sub[i])
}
// 保存
this.setData({
province: cityData[val[0]].name,
city: cityData[val[0]].sub[0].name,
citys: citys,
countys: countys,
values: val,
value: [val[0], 0, 0],
fdeliveryProvince: this.data.provinces[val[0]].code,
fdeliveryCity: cityData[val[0]].sub[0].code,
})
// 防止只有省市的情况
if (cityData[val[0]].sub[0].sub.length!=0){
that.setData({
county: cityData[val[0]].sub[0].sub[0].name,
fdeliveryArea: cityData[val[0]].sub[0].sub[0].code
})
}else {
that.setData({
county: '',
fdeliveryArea:''
})
}
return;
}
// 滑动市
if (val[1] != t[1]) {
const countys = [];
// 保存市
for (let i = 0; i < cityData[val[0]].sub[val[1]].sub.length; i++) {
countys.push(cityData[val[0]].sub[val[1]].sub[i])
}
// 保存
this.setData({
city: this.data.citys[val[1]].name,
countys: countys,
values: val,
value: [val[0], val[1], 0],
fdeliveryCity: this.data.citys[val[1]].code,
})
// 防止只有省市的情况
if (countys.length != 0) {
that.setData({
county: cityData[val[0]].sub[val[1]].sub[0].name,
fdeliveryArea: cityData[val[0]].sub[val[1]].sub[0].code
})
} else {
that.setData({
county: '',
fdeliveryArea: ''
})
}
return;
}
// 滑动区
if (val[2] != t[2]) {
this.setData({
county: this.data.countys[val[2]].name,
values: val,
fdeliveryArea: this.data.countys[val[2]].code
})
return;
}
}html
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
