原生vue实现VantUI中IndexBar索引导航栏功能

柔光的暖阳◎ 2023-06-19 09:55 29阅读 0赞

##### 一、思路说明： #####

这里是以城市列表数据作为索引，通过对于城市拼音的首字母进行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>