小程序实现vant weapp UI的van-index-bar组件（城市列表）

效果

van-index-bar组件地址：https://youzan.github.io/vant-weapp/#/index-bar

ps：这儿的页面效果和vant weapp组件上不一样，是因为当时引用该组件的时候样式就出了问题，索性我就修改了样式

index.wpy

ps:此处页面上的代码也和vant weapp上不一样。当时我是照着vant写的，结果一直没出来，心塞。但又因为项目需要，所以我就去看了van-index-bar的源码，才明白要这样做。

    {
        navigationBarTitleText:'城市选择',
        usingComponents: {
            "van-index-bar": "../../components/modules/index-bar/index",
            "van-index-anchor": "../../components/modules/index-anchor/index",
            "van-cell": "../../components/vant/cell/index",
        }
    }

index.js

import wepy from '@wepy/core'
import cityList from '../../service/city'
wepy.page({
    data: {
        scrollTop:0,
        cityList,
        citys: [],
        firstLetter:[],
        type:null,
    },
    methods: {
        getName(event){
           console.log("event",event)
            const areaId = event.currentTarget.dataset.id;
            const name = event.currentTarget.dataset.name;
            wx.navigateTo({
                url:'/pages/decarationIndex/index?areaId='+areaId+'&name='+name
            })
        
        }
    },
    onLoad:function(options) {
        let firstLetter = [];
        // 取出所有首字母
        for(let key in cityList){
            firstLetter.push(key)
        }
        this.firstLetter = firstLetter;
        const citys = [];
        for(let key in cityList){
            citys.push({
                firstName:key,
                cur:cityList[key]
            })
        }
        this.citys = citys;
    },
    onShow:function(){

    },
    onPageScroll(event) {
        this.scrollTop=event.scrollTop;
    }
})

ps:city.js文件是我找后端要的，然后就是自己拼接数据格式，格式如下：

有问题的小伙伴欢迎留言，我会回复的