When using uni-app, when making the city management page, you need to click the alphabet and slide to the column of the city list corresponding to the corresponding letter. Here you need to use the scroll-view component in uni-app, which can be implemented relatively simply.
The main use here is the scroll-into-view attribute in the scroll-view component.
By giving it a dynamic value and a fixed id value for the component wrapped by scroll-view, if the value in scroll-into-view is equal to its fixed id value, it will slide to the corresponding id value Component location. In this way, clicking on the alphabet will slide to the corresponding position of the corresponding letter.
<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>The following is a simple js code. If you want to implement the scrolling alphabet of the city list, you need to calculate the height of the following alphabet from the top.
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;
}The above is the simple use of scroll-view, which can be used to implement many examples of related scrolling.