uniapp实现按字母切换城市组件【使用:scroll-into-view=“viewId“跳转id所在位置】、滑动字母表联动、定时器优化滚动性能、选择城市传参uni.setStorage

1.changeCity.vue

<template>
	<view class="city">
		<change-header></change-header>
		<change-list :letter="letter" :city="city"></change-list>
		<change-alphabet @change="change" :city="city"></change-alphabet>
	</view>
</template>

<script>
	import changeHeader from'../../components/changeHeader.vue'
	import changeList from'../../components/changeList.vue'
	import changeAlphabet from'../../components/changeAlphabet.vue'
	export default {
		components:{
			changeHeader,
			changeList,
			changeAlphabet
		},
		data() {
			return {
				city:[],
				letter:[]
			}
		},
		methods: {
			getCityInfo(){
				uni.request({
					url:'http://192.168.30.159:5000/city.json',
					success: (res) => {
						this.city=res.data.city
					}
				})
			},
			change(res){
				this.letter=res
			}
		},
		created() {
			this.getCityInfo()
		}
	}
</script>

<style>
.city{
	width:100%;
	background: #000000;
	height: 100%;
}
</style>

2.changeHeader.vue

<template>
	<view class="">
		<view class="changeHeader">
			<navigator open-type="navigateBack" class="iconfont iconchahao left"></navigator>
			<view class="title">
				切换城市
			</view>
		</view>
		<view class="ground"></view>
	</view>	
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style>
.changeHeader{
	width: 100%;
	height: 80px;
	line-height: 80px;
	position:fixed;
	top:0;
	left:0;
	margin: 0 auto;
	background: #000000;
}
.ground{
	width: 100%;
	height: 80px;
}
.left{
	position: absolute;
	top:0;
	left:15px;
	height: 80px;
	line-height: 80px;
	color: #AAAAAA;
	font-size: 18px;
}
.title{
	font-size:17px;
	text-align: center;
	color: #FFFFFF;
}
</style>

3.chageAlphabet.vue

<template>
	<view class="changeAlphabet">
		<view class="list">
			<view 
			class="item" 
			v-for="(item,index) of city" 
			:key="index"
			hover-class="hover"
			@click="click(item.initial)"
			@touchstart="touchStart"
			@touchmove="touchMove"
			@touchend="touchEnd"
			>
				{{item.initial}}
			</view>
			
		</view>
	</view>
</template>

<script>
	var time=null;
	export default {
		props:['city'],
		data() {
			return {
				touch:false
			};
		},
		methods:{
			click(res){
				this.$emit('change',res)
			},
			touchStart(){
				this.touch=true
			},
			touchMove(e){
				clearTimeout(time)
				time =setTimeout(()=>{
					if(this.touch){
						const touchY=e.changedTouches[0].pageY-150
						const index=Math.floor(touchY/15)
						if(index>=0&&index<=this.city.length){
							this.$emit('change',this.city[index].initial)
						}	
					}
				},30)	
			},
			touchEnd(){
				this.touch=false
			}
		}
	}
</script>

<style>
.changeAlphabet{
	position: fixed;
	top:150px;
	right:0px;
	z-index: 20;
}
.list{
	width: 30px;
}
.item{
	text-align: center;
	line-height: 15px;
	font-size: 12px;
	color: #FFFFFF;
}
.hover{
	text-align: center;
	line-height: 15px;
	font-size: 18px;
	color: #FFFFFF;
}
</style>

4.changeList.vue

<template>
	<view class="changeList">
		<scroll-view class="scrolly" scroll-y="true" :scroll-into-view="viewId">
			<view class="city-box">
				<view class="box">
					<view class="title">
						<icon class="iconfont icondingwei"></icon>
						当前城市
					</view>
					<view class="currentCity">{{tcity}}</view>
				</view>
				<view class="box">
					<view class="title">
						热门城市
					</view>
					<view class="hotlist">
						<view class="item" v-for="(item,index) of list" :key="index">
							{{item}}
						</view>
					</view>
				</view>
				<view class="box-list" v-for="(cities,index) in city" :key="index">
					<view class="initial" :id="cities.initial">
						{{cities.initial}}
					</view>
					<view 
					class="city-name" 
					v-for="item of cities.list" 
					:key="item.code"
					@click="click(item.name)">
						{{item.name}}
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props:['city','letter'],
		data() {
			return {
				list:['深圳','北京','上海','成都','广州','重庆','西安','苏州','武汉','杭州','郑州','南京'],
				viewId:'',
				tcity:"北京"
			};
		},
		methods:{
			click(res){
				uni.setStorage({
					key:'city',
					data:res
				})
				uni.getStorage({
					key:'city',
					success: (res) => {
						this.tcity=res.data
					}
				})
				uni.redirectTo({
					url:'/pages/city/city'
				})
			}
		},
		watch:{
			letter(){
				this.viewId=this.letter
			}
		}
	}
</script>

<style>
.changeList{
	width: 100%;
	background: #000000;
	z-index: 19;
	height: 100%;
}
.box{
	background: #222222;
	margin-top: 10px;
	padding:0 5px 20px 5px
}
.title{
	height: 40px;
	line-height: 40px;
	margin-left: 15px;
	color: #FFFFFF;
	font-size: 14px;
}
.currentCity{
	color: #AAAAAA;
	font-size: 15px;
	margin-left: 15px;
	height:30px;
	line-height: 30px;
}
.hotlist{
	width:100%;
	overflow: hidden;	
}
.item{
	width:30%;
	height:28px;
	line-height: 28px;
	font-size: 13.5px;
	float: left;
	background: #333333;
	margin-left:2.5%;
	margin-bottom: 10px;
	text-align: center;
	color: #AAAAAA;
}
.box-list{
	padding: 8px 5px;
}
.initial{
	height: 25px;
	line-height: 25px;
	background: #000000;
	padding-left: 10px;
	color: #666666;
	font-size: 12px;
}
.city-name{
	background: #222222;
	height: 40px;
	line-height: 40px;
	padding-left: 10px;
	color: #AAAAAA;
	font-size: 15px;
}
.scrolly{
	height: 100%;
}

		  
</style>