三级联动是商品类程序常用的和必要的功能,不同的商家也有不同的三级联动选择,但是大都相同,下面是我自定义的三级联动,通过接口请求一级一级往下请求显示地址信息。
效果图:
实现思路:
省、城市、区都有自己的接口。
省:在请求省的时候,保存城市的参数以便请求城市接口使用(这时候省份会显示出来)。
城市:请求城市接口时,使用保存的城市的参数,进行城市信息显示,同时保存区的参数,以便情求区接口使用。
区:使用保存的区的参数,显示区的信息
注:我这里的代码是引入了colorUI
话不多说咱直接上代码
HTML:
<view class="cu-form-group margin-top">
<view class="title">省份</view>
<picker bindchange="PickerChange" value="{{index}}" range="{{sheng_name}}">
<view class="picker">
{{index?sheng_name[index]:'请选择'}}
</view>
</picker>
</view>
<!-- 城市选择 -->
<view class="cu-form-group margin-top">
<view class="title">城市</view>
<picker bindchange="PickerChangeTo" value="{{indexs}}" range="{{cheng_name}}">
<view class="picker">
{{indexs?cheng_name[indexs]:'请选择'}}
</view>
</picker>
</view>
<!-- 区域选择 -->
<view class="cu-form-group margin-top">
<view class="title">区</view>
<picker bindchange="PickerChangeXo" value="{{indexv}}" range="{{xian_name}}">
<view class="picker">
{{indexv?xian_name[indexv]:'请选择'}}
</view>
</picker>
</view>
JS:
// pages/tack/tack.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
sheng:[],
sheng_name:[],
sheng_id:null,
index:null,
cheng:[],
cheng_name:[],
cheng_id:null,
indexs:null,
xian:[],
xian_name:[],
xian_id:null,
indexv: null
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this
wx.request({
url: 'https://exam.qhynice.top/index.php/Api/Address/get_province',
method:'POST',
data:{},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success:function(res){
var sheng = res.data.list
var sheng_name = []
for (var i in sheng) {
sheng_name.push(sheng[i].name)
}
that.setData({
sheng: sheng,
sheng_name: sheng_name
})
}
})
},
// 省份选择
PickerChange(e) {
let that = this
var sheng_id = that.data.sheng[e.detail.value].id
let indexs = 0
that.setData({
index: e.detail.value,
sheng_id: sheng_id,
indexs : indexs
})
that.data.index++
wx.request({
url: 'https://exam.qhynice.top/index.php/Api/Address/get_city',
method:'POST',
data:{
sheng: that.data.index
},
header:{
'content-type': 'application/x-www-form-urlencoded'
},
success:function(res){
var cheng = res.data.city_list
var cheng_name = []
for (var i in cheng) {
cheng_name.push(cheng[i].name)
}
that.setData({
cheng: cheng,
cheng_name: cheng_name
})
}
})
},
// 城市选择
PickerChangeTo(e){
let that = this
var cheng_id = that.data.cheng[e.detail.value].id
that.setData({
indexs: e.detail.value,
cheng_id: cheng_id
})
that.data.indexs++
wx.request({
url: 'https://exam.qhynice.top/index.php/Api/Address/get_area',
method: 'POST',
data: {
city: cheng_id,
sheng: that.data.index
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
// console.log(res)
var xian = res.data.area_list
var xian_name = []
for (var i in xian) {
xian_name.push(xian[i].name)
}
that.setData({
xian: xian,
xian_name: xian_name
})
}
})
},
PickerChangeXo(e){
let that = this
var xian_id = that.data.xian[e.detail.value].id
that.setData({
indexv: e.detail.value,
xian_id:xian_id
})
that.data.indexv++
}
})