更新记录

1.0.3（2023-10-10）

修复一个匹配问题

1.0.2（2023-09-26）

优化方法及文档

1.0.1（2023-09-26）

完善扩展数据使用

平台兼容性

初衷

本来打算找个现成的轮子，结果发现他们的实现感觉都有点复杂了，自己简单实现了一下，如此而已

200+行左右实现,代码简单,功能也比较强大,扩展性也很好

功能支持

• 搜索
• 右侧索引快速定位，滚动定位
• 数据中文转拼音自动识别
• 自定义扩展头部，底部数据
• 数据动态变化
• tag索引列表动态变化

数据格式

传入数据

[
  {}, //数据内容自己定义，指定nameKey，pinyinKey 2个输入参数即可
  ······
]

解析后的map数据

如使用扩展头部、底部数据可传入以下数据格式，index为空，则不显索引标题。头部扩展数据传入参数：headerMap,底部为：footerMap

[
  {
    "index": "", // 索引的标签值
    "list": [
      {}, // 数据内容
      ······
    ]
  },
  ······
]

使用示例

简单使用

<template>
  <view class="container">
    <index-list-cc :data="list" :headerMap="headerMap" nameKey="nickname" v-on:selected="selected"></index-list-cc>
  </view>
</template>

<script>

export default {
  data() {
    return {
      list: [{"uid":"ex","username":"ex","nickname":"c阿萨德","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"#das发生","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"不是你","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"初始化","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"打啥电话健康","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"跟俺说的","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"让啥","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"是阿斯顿","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"以上的","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"这是啊大姐","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"啊打算试试","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"打电话健康","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"八十多","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"啊啊是的","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"啊发生","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"不是你","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"初始化","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"打啥电话健康","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"跟俺说的","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"让啥","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"是阿斯顿","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"以上的","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"这是啊大姐","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"啊打算试试","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"打电话健康","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"八十多","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"啊啊是的","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"@啊发生","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"}],
      headerMap: [
        {
          index: '',
          list: [
            {
              avatar: '',
              nickname: '新的朋友'
            },
            {
              avatar: '',
              nickname: '群聊',
            },
          ]
        }
      ],
    }
  },
  methods: {
    selected(item) {
      console.info(item)
    }
  }
}
</script>

<style lang="scss">
.container {
  height: 100%;
}
</style>

如展示图，配合使用其他插件 （需安装uni-search-bar、uni-list-item）

<template>
  <view class="container">
    <indexed-list-cc :data="list" nameKey="nickname" :inputKeywords.sync="keyword" v-on:selected="selected">
      <template v-slot:search>
        <uni-search-bar v-model="keyword" class="uni-mt-10" radius="100" placeholder="请输入搜索信息" clearButton="none" cancelButton="none"/>
      </template>
      <template v-slot:item="{item}">
        <uni-list-item thumb-size="lg"
                       :thumb-circle="true"
                       :title="item.nickname"
                       :thumb="item.avatar"></uni-list-item>
      </template>
    </indexed-list-cc>
  </view>
</template>

<script>

export default {
  data() {
    return {
      keyword: '',
      list: [{"uid":"ex","username":"ex","nickname":"啊发生","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"#das发生","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"不是你","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"初始化","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"打啥电话健康","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"跟俺说的","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"让啥","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"是阿斯顿","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"以上的","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"这是啊大姐","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"啊打算试试","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"打电话健康","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"八十多","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"啊啊是的","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"啊发生","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"不是你","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"初始化","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"打啥电话健康","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"跟俺说的","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"让啥","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"是阿斯顿","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"以上的","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"这是啊大姐","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"啊打算试试","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"打电话健康","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"八十多","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"啊啊是的","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"},{"uid":"ex","username":"ex","nickname":"@啊发生","avatar":"https://pic.rmb.bdstatic.com/bjh/down/812a61e10fda57d500987a589559a806.jpeg","gender":1,"allowType":1,"friendRemark":"EX"}],
    }
  },
  methods: {
    selected(item) {
      console.info(item)
    }
  }
}
</script>

<style lang="scss">
.container {
  height: 100%;
}
</style>

一些问题

循环使用插槽，微信小程序会报异常，建议直接在组建中使用子组建

超大数据支持问题

告知：目前暂未使用虚表实现，流程只支持5000以下数据，目前我的需求已经足够满足了。有超大数据时再考虑出个虚表的组建替换一下底层实现。

支持

如果该项目对你有帮助，麻烦点个赞赏，支持一杯咖啡喝，3Q