学习笔记——uni-app如何实现城市联动

在使用uni-app时，做城市管理页面时，需要点击字母表，并滑动到相应字母对应的城市列表一栏。这里需要用到uni-app中的scroll-view组件就可以比较简单的实现。

---

这里主要使用的时scroll-view组件中 scroll-into-view属性。

通过给其一个动态的值，并给scroll-view包裹的组件一个固定的id值，如果当scroll-into-view中的值等于其固定的id值时，就会滑动到相应id值所对应的组件位置。以此来实现了点击字母表，会滑动到相应字母对应位置。

   

​<view class="alphabet-wrapper">
    <view class="alphabet">
        <text class="letter" v-for="(item, index) in letters" :key="index"
		:class="{active: activeLettter == item}" @tap="changeLetter(item)">{
   
   {item}}</text>
	</view>
</view>
<scroll-view class="city-wrapper" scroll-y="true" :scroll-into-view="activeLettter"
		 scroll-with-animation="true">
    <view class="city-city" v-for="(item, index) in cityList" :key="index">
	    <view class="city-title" :id="item.letter">
		    <text class="title">{
   
   {item.letter}}</text>
		</view>
	    <view class="city-content" v-for="(it, index2) in item.list" :key="index2">
		    <text class="name">{
   
   {it}}</text>
		</view>
	</view>
</scroll-view>

以下是简单的js代码，如果想要实现城市列表滚动关联字母表，需要计算以下字母表距离顶部的高度。

export default {
    data() {
	    return {
		    letters: ['A','B','C','D','E','F'],
			activeLettter: '',
			cityList: [
			    { letter: 'A', list: ['啊们', '啊们','啊们','啊们','啊们','啊们','啊们',]},
				{ letter: 'B', list: ['波波', '波波', '波波', '波波', '波波', '波波', '波波']                     
                }
			]
		};
	},
    methods: {
	    changeLetter(letter) {
		    this.activeLettter = letter
		}
	}
}

	.alphabet-wrapper {
		z-index: 10;
		position: fixed;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		padding: 0 20upx;
		box-sizing: border-box;
	}
	.alphabet {
		color: white;
		display: flex;
		flex-direction: column;
	}
	.letter {
		width: 32upx;
		text-align: center;
		margin: 10upx 0;
	}
	.letter.active {
		font-size: 36upx;
		font-weight: 800;
		color: #0000FF;
	}
	.city-wrapper {
		height: 600upx;
		display: flex;
		flex-direction: column;
		background-color: #111111;
	}
	.city-city {
		display: flex;
		flex-direction: column;
	}
	.city-city .city-title {
		margin: 10upx 20upx;
	}
	.city-city .city-content {
		height: 80upx;
		display: flex;
		background-color: #555555;
		align-items: center;
		padding-left: 20upx;
		color: white;
	}

 

---

以上就是scroll-view的简单使用，可以用来实现不少关联滚动的例子。