vant 实现IndexBar 索引栏

1、效果图如下:
在这里插入图片描述
2、数据格式化前后对比
格式化之前(即一般后台请求的数据)

在这里插入图片描述

格式化之后,将数据按开头字母进行分类
在这里插入图片描述

3、数据格式化的方法

let cityName = {};
    //循环26个字母的数组
    this.FirstPin.forEach(item => {
    cityName[item] = [];
    cities.forEach(el => {
        //对比开头字母是否对应
        let first = el.pinyin.substring(0, 1).toUpperCase();
        if (first == item) {
             cityName[item].push(el);
        }
     });            
});
4、全部实现代码
<template>
    <div class="content">
        <van-sticky>
            <van-nav-bar
                title="选择城市"
                left-arrow
            />
            <van-search v-model="search" placeholder="请输入搜索关键词" />
        </van-sticky>
        <van-index-bar :sticky='false'>
            <van-index-anchor :index="name" v-for="(item,name) in cities" :key="name">
                <b>{{name}}</b>
            </van-index-anchor>
        </van-index-bar>
    </div>
</template>

<script>
export default {
    data(){
        return{
            FirstPin: [
                "A",
                "B",
                "C",
                "D",
                "E",
                "F",
                "G",
                "H",
                "J",
                "K",
                "L",
                "M",
                "N",
                "P",
                "Q",
                "R",
                "S",
                "T",
                "W",
                "X",
                "Y",
                "Z"
            ],
            cities:{},
            search:''
        }
    },
    mounted(){
        this.$axios({
            url:'请求地址'
        }).then(res=>{
            var cities = '请求得到的数据';
            console.log(cities)
            let cityName = {};
            //循环26个字母的数组
            this.FirstPin.forEach(item => {
                cityName[item] = [];
                cities.forEach(el => {
                    //对比开头字母是否对应
                    let first = el.pinyin.substring(0, 1).toUpperCase();
                    if (first == item) {
                        cityName[item].push(el);
                    }
                });            
            });
            console.log(cityName) 
            this.$nextTick(()=>{
                this.cities = cityName; 
            }) 
        }).catch(err=>{
            console.log(err)
        })
    }
}
</script>

<style lang="scss" scoped>
.content{
    background: #eee;
}
::v-deep .van-index-anchor{
    padding: 0;
    b{
        padding-left:10px;
        font-size: 14px;
        font-weight: 600;
    }
}
</style>

转载自:https://www.cnblogs.com/piaoyi1997/p/13533367.html

  • 1
    点赞
  • 5
    评论
  • 8
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值