原生vue实现VantUI中IndexBar索引导航栏功能
一、思路说明:这里是以城市列表数据作为索引,通过对于城市拼音的首字母进行Index索引标识,通过右侧的字母索引列表,能够快速到定位到左侧的城市列表信息,找到指定的字母Index下的所有城市列表信息数据,并且进行显示,实现了VantUI中IndexBar索引导航栏功能。二、代码实现:<template><div class="city_body">...
·
一、思路说明:
这里是以城市列表数据作为索引,通过对于城市拼音的首字母进行Index索引标识,通过右侧的字母索引列表,能够快速到定位到左侧的城市列表信息,找到指定的字母Index下的所有城市列表信息数据,并且进行显示,实现了VantUI中IndexBar索引导航栏功能。
二、代码实现:
<template>
<div class="city_body">
<div class="city_list">
<div class="city_hot">
<h2>热门城市</h2>
<ul class="clearfix">
<li v-for="item in hotList" :key="item.id">{{ item.nm }}</li>
</ul>
</div>
<div class="city_sort" ref="city_sort">
<div v-for="item in cityList" :key="item.index">
<h2>{{ item.index }}</h2>
<ul>
<li v-for="itemList in item.list" :key="itemList.id">{{ itemList.nm }}</li>
</ul>
</div>
</div>
</div>
<div class="city_index">
<ul>
<li v-for="(item, index) in cityList" :key="item.index" @touchstart="handleToIndex(index)">{{ item.index }}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'City',
data() {
return {
cityList: [],
hotList: []
}
},
mounted() {
this.axios.get('/api/cityList').then((res) => {
// console.log(res);
// 数据格式: [ { index: 'A', list: [{ nm: '北京', id: 1}]}]
var msg = res.data.msg;
if( msg === 'ok') {
var cities = res.data.data.cities;
var {cityList, hotList} = this.formatCityList(cities);
this.cityList = cityList;
this.hotList = hotList;
}
});
},
methods: {
formatCityList(cities) {
var cityList = [];
var hotList = [];
// 热门城市列表信息
for(var i=0;i<cities.length; i++) {
if(cities[i].isHot === 1){
hotList.push( cities[i]);
}
}
// 城市列表信息
for(var i=0; i<cities.length; i++) {
var firstLetter = cities[i].py.substring(0,1).toUpperCase();
if(toCom(firstLetter)) { // 新添加到索引中
cityList.push({index: firstLetter, list: [{ nm: cities[i].nm, id: cities[i].id}]});
}else { // 累计到已有的索引
for(var j=0; j<cityList.length; j++){
if(cityList[j].index === firstLetter) {
cityList[j].list.push( { nm: cities[i].nm, id: cities[i].id} );
}
}
}
}
// 城市数据索引index的排序
cityList.sort((n1,n2) => {
if(n1.index > n2.index) {
return 1;
}
else if (n1.index < n2.index) {
return -1;
} else {
return 0;
}
})
// 判断index是否存在于cityList中
function toCom(firstLetter) {
for(var i=0;i<cityList.length;i++){
if(cityList[i].index === firstLetter) {
return false;
}
}
return true;
}
// console.log(cityList);
// console.log(hotList);
return {
cityList,
hotList
}
},
// 点击右侧索引,左侧城市列表也滚动到指定的位置
handleToIndex(index) {
var h2 = this.$refs.city_sort.getElementsByTagName('h2');
this.$refs.city_sort.parentNode.scrollTop = h2[index].offsetTop;
}
}
}
</script>
// style样式代码
<style scoped>
#content .city_body{ margin-top: 45px; display: flex; width:100%; position: absolute; top: 0; bottom: 0;}
.city_body .city_list{ flex:1; overflow: auto; background: #FFF5F0;}
.city_body .city_list::-webkit-scrollbar{
background-color:transparent;
width:0;
}
.city_body .city_hot{ margin-top: 20px;}
.city_body .city_hot h2{ padding-left: 15px; line-height: 30px; font-size: 14px; background:#F0F0F0; font-weight: normal;}
.city_body .city_hot ul li{ float: left; background: #fff; width: 29%; height: 33px; margin-top: 15px; margin-left: 3%; padding: 0 4px; border: 1px solid #e6e6e6; border-radius: 3px; line-height: 33px; text-align: center; box-sizing: border-box;}
.city_body .city_sort div{ margin-top: 20px;}
.city_body .city_sort h2{ padding-left: 15px; line-height: 30px; font-size: 14px; background:#F0F0F0; font-weight: normal;}
.city_body .city_sort ul{ padding-left: 10px; margin-top: 10px;}
.city_body .city_sort ul li{ line-height: 30px; line-height: 30px;}
.city_body .city_index{ width:20px; display: flex; flex-direction:column; justify-content:center; text-align: center; border-left:1px #e6e6e6 solid;}
</style>
更多推荐
已为社区贡献26条内容
所有评论(0)