Al usar uni-app, al crear la página de administración de la ciudad, debe hacer clic en el alfabeto y deslizarse a la columna de la lista de ciudades correspondiente a la letra correspondiente. Aquí debe usar el componente de vista de desplazamiento en uni-app, que se puede implementar de manera relativamente simple.
El uso principal aquí es el atributo scroll-into-view en el componente scroll-view.
Al darle un valor dinámico y un valor de id fijo para el componente envuelto por scroll-view, si el valor en scroll-into-view es igual a su valor de id fijo, se deslizará al valor de id correspondiente Ubicación del componente. De esta forma, al hacer clic en el alfabeto se deslizará a la posición correspondiente de la letra correspondiente.
<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>El siguiente es un código js simple. Si desea implementar el alfabeto de desplazamiento de la lista de ciudades, debe calcular la altura del siguiente alfabeto desde la parte superior.
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;
}Lo anterior es el uso simple de la vista de desplazamiento, que se puede utilizar para implementar muchos ejemplos de desplazamiento relacionado.