在使用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的简单使用,可以用来实现不少关联滚动的例子。