自己维护地址时前端展示

** 在一个项目需要自己维护地址时，就需要根据后端维护的地址进行选择**
使用swiper实现省市区三级联动，每个获取的列表都是后台接口（省市区三个列表）

1. 先需要写三个swiper，分别对应省市区，每个swiper-item就是对应的省市区的名称，页面展示5个
2. 获取的数据，不能在头部，需要留空，所以要对数据进行头尾各推加两个空元素站位
3. 进入页面获取省，市，区列表，默认省市的id
4. 要有3个变量分别监听省市区的当前指定的current，减去空元素的站位

html代码

//省列表的展示，市、区一样
<view class="p-province">
	<swiper :vertical="true" :display-multiple-items="5"		//展示5个 
		:current="pCurrent" :acceleration='true' 						//当前指定pCurrent
		class="popup-swiper" @change="provinceEnd"		//在滑动时就触发市的请求，不会太快，测试正常使用，不习惯可以使用@animationfinish
		>
		<swiper-item class="swiper-item" v-for="(item,index) in provinceList" :key="index">
			<view class="province-name" :style="(pCurrent + 2) == index?'color: #BE9762':''">{{item.name}}</view>  //空元素考虑
		</swiper-item>
	</swiper>
</view>

js代码

//默认请求，将需要的初始数据id在data中声明好
getAddress(){
	uni.request()  .then(res=>{
		this.provinceList = res.data
		this.provinceList.push('','')
		this.provinceList.unshift('','')
	})
	//省、市、区请求类似，不用再调用
	this.getCity()
	this.getArea()
}

// 滑动结束时
provinceEnd(e){
	this.pCurrent = e.detail.current
	this.pId = this.provinceList[this.pCurrent + 2].id
	this.getCity()
	this.aCurrent = 0							//重置市区到第一位，不重置滑动省，市、区不变化(所在区域)
	this.cCurrent = 0
	//在进行获取市列表时，cId赋值慢
	this.$nextTick(()=>{
			this.cId = this.cityList[this.cCurrent + 2].id
				this.getArea()
			})
},

粗略记录下，有时间填充