类似某团app搜索城市界面中 点击右侧城市首字母,对应城市区域置顶的功能(uniapp)

功能类似:某团app上面,跳转到搜索城市界面,点击右侧城市首字母,然后对应城市区域置顶的效果。

主要用到底组件:<scroll-view> , 然后里面有个要用到的属性: scroll-into-view (这个值应为某子元素id。设置哪个方向可滚动,则在哪个方向滚动。)

           一定不要忘记给组件设置高度喔!!!

见代码:

//html 界面
<template>
<view class="search-city-container">
<scroll-view :scroll-into-view="scrollIntoView" scroll-y="true" class="scroll-view"
scroll-with-animation="true" :style="{'height':windowHeight+'px'}">
//假设:这里放搜索的input框
<view class="search-input"></view>

<view class="recent-visit"></view> //这里可以放 定位/最近访问 的数据
//这里放所有城市的数据
<view class="city-container">
<view class="city-detail" v-for="(item,index) in list" :key="index"
:id="item.首字母字段值"> //重点是这里的id值哦!!!

...这里再根据返回的数据具体排版即可
</view>
</view>

</scroll-view>
//这里可以排版右侧定位首字母的位置
<view class="letters">
<view class="letter-detail" @click="handleLetters(item,index)" v-for="(item,index) in list"
:key="index" :class="index==defaultIndex?'current':''">{{item.大写首字母}}</view>
</view>
</view>

</template>
<script>
export default{
data(){
return{
defalutIndex:0,//默认值
scrollIntoView:'A',//设个默认值
id:'A',//
windowHeight:'',//
}
},
onLoad(){
let that = this;
uni.getSystemInfo({
success:function(res){
that.windowHeight = res.windowHeight;
}
})
},
methods:{
//点击右侧定位的首字母触发事件
handleLetters(item,index){
this.defaultIndex = index;
this.scrollIntoView = item.首字母; //这里赋值scrollIntoView的值。
},
//搜索城市触发事件
searchInput(e){
        let val = e.detail.value;
let allcity = [...xxxx];//假设这里有很多城市的数据
let selectedCity = [];
for(let i=0;i<allcity.length;i++){
if(allcity[i].match(new RegExp("("+val+")"),"ig")){
selectedCity.push(allcity[1]);
}
}
this.selectedCity = selectedCity;//搜索城市,匹配所有城市里面的关键字
}
}
}
</script>
如果快乐太难,那祝你平安。
原文地址:https://www.cnblogs.com/sunnyeve/p/13936801.html