vue 仿微信通讯录实现侧边字母快速检索

预览图

实现步骤

1. 处理后台传来的数据，数据格式化

     pySegSort(arr){
            if (!String.prototype.localeCompare) return null
            // let letters = 'abcdefghjklmnopqrstwxyz'.split('')
            let letters = 'ABCDEFGHJKLMNOPQRSTWXYZ'.split('')
            let zh = '阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀'.split('')
            let segs = []
            letters.forEach((item, i) => {
                let cur = { letter: item, data: [] }
                arr.forEach((item) => {
                    if(item.city.localeCompare(zh[i])>=0&&item.city.localeCompare(zh[i+1])<0){
                        cur.data.push(item)
                    }         
                })
                if (cur.data.length) {   
                        cur.data.sort(function(a, b) {
                            return a.city.localeCompare(b, 'zh')
                        })
                        segs.push(cur)
                    }
            })

            return segs
        },

将数据格式化为以下格式

[
{
    title:'A'
    data:[
        {
            city:'安康市‘,
            id:1
            }
        ]
    },
{
    title:'B'
    data:[
        {
            city:'北京市‘,
            id:2
            }
        ]
    },
    ]

2. 利用Element.scrollTo()

做滑动效果，需要计算出每个字母标题下数组的长度，计算结果放入一个数组中

 calculateTotalHeight() {
            var list = this.$refs.listGroup
            var height = 0
            this.listHeight.push(height)
            console.log(list.length,'list')
            if(list&&list.length>0){
                for (var i = 0; i < list.length; i++) {
                    var item = list[i]
                    height += item.clientHeight
                    this.listHeight.push(height)
                }
            }
        }

3. 点击侧边字母滑动到对应字母标题

        goIndex(params) {
            const groupRef = this.$refs.groupRef
            const titleRef = this.$refs.titleRef
            titleRef.map((item,index) => {
            if (item.innerText === params) {
                groupRef.scrollTo(0,this.listHeight[index])
            }
            })
        },

html部分

   <div class="content">
            <div class="top">
                <div style="height: 50%;margin:0 0.4rem">
                    <h5>常用大区</h5>
                    <div class="one">
                        <van-tag class="tagsClass" v-for="(area,index) in regionList" :key="index" @click="choose