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

刺骨的言语ヽ痛彻心扉 2023-06-23 13:14 13阅读 0赞

# 效果 #

van-index-bar组件地址：[https://youzan.github.io/vant-weapp/\#/index-bar][https_youzan.github.io_vant-weapp_index-bar]

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

![201912191205579.gif][]

# 修改的样式 #

index-anchor组件下的index.wxss文件：

只需要注释掉那一行代码就可以

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70][]

# index.wpy #

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

<template>
        <van-index-bar index-list="{
       { firstLetter }}" scroll-top="{
       { scrollTop }}">
            <van-index-anchor wx:for="{
       {citys}}" wx:key="index" index="{
       {item.firstName}}" use-slot="{
       {true}}">
                 {
       {item.firstName}}
                <van-cell wx:for="{
       {item.cur}}" wx:key="index" data-id="{
       {item.id}}" data-name="{
       {item.name}}" title="{
       {item.name}}" bindtap="getName"/>
            </van-index-anchor>
        </van-index-bar>
    </template>
    <style src='./index.less' lang='less'></style>
    <script src="./index.js"></script>
    <config>
        {
            navigationBarTitleText:'城市选择',
            usingComponents: {
                "van-index-bar": "../../components/modules/index-bar/index",
                "van-index-anchor": "../../components/modules/index-anchor/index",
                "van-cell": "../../components/vant/cell/index",
            }
        }
    </config>

# 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文件是我找后端要的，然后就是自己拼接数据格式，格式如下：

![20191219122546447.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70 2][]

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

[https_youzan.github.io_vant-weapp_index-bar]: https://youzan.github.io/vant-weapp/#/index-bar
[201912191205579.gif]: https://img-blog.csdnimg.cn/201912191205579.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210415143737183.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw==,size_16,color_FFFFFF,t_70
[20191219122546447.png]: https://img-blog.csdnimg.cn/20191219122546447.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191219122402542.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191219122506391.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw==,size_16,color_FFFFFF,t_70