更新记录

1.1.2(2021-04-16)

优化 一些清理方法在需要的时候才执行

1.1.1(2021-04-16)

优化 顶部搜索输入框添加去抖动处理

查看更多

平台兼容性

app 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 快应用
3.1.3 × × × × × ×
h5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox pc-Safari
× × × × ×

uni-app 索引列表

一个简单的带索引列表。仅支持移动端h5。不能在小程序app里正常工作

使用

<template>
  <missthee-indexlist :listData="listData" :isBigData='enableBigData' @select-item='selectHandler'></missthee-indexlist>
</template>


  export default {
    data() {
      return {
        enableBigData: true, //是否开启大数据渲染,如果开启会插入20000条测试数据到表格,方法在create中
        listData: {
          "A": [{
            id: 1,  //[必须]id,作为v-for的key使用
            name: "A市",  //[必须]名称,作为显示字段
            customParam: "自定义属性" //可以额外添加任意的自定义属性,返回结果中会包含这些属性
          },],
          "B": [{
            id: 2,
            name: "B市",
          },
          {
            id: 3,
            name: "B1市",
          },],
          "C": [{
            id: 4,
            name: "C市",
          },],
          "D": [{
            id: 5,
            name: "D市",
          },],
          "E": [{
            id: 6,
            name: "E市",
          },],
          "F": [{
            id: 7,
            name: "F市",
          },],
          "G": [{
            id: 8,
            name: "G市",
          },],
          "H": [{
            id: 9,
            name: "淮北市",
          },],
          "I": [{
            id: 10,
            name: "淮北市",
          },],
          "J": [{
            id: 11,
            name: "J市",
          },],
          "K": [{
            id: 12,
            name: "K市",
          },],
          "L": [{
            id: 13,
            name: "L市",
          },],
          "M": [{
            id: 14,
            name: "M市",
          },],
          "N": [{
            id: 15,
            name: "N市",
          },],
          "O": [{
            id: 16,
            name: "O市",
          },],
          "P": [{
            id: 17,
            name: "P市",
          },],
          "Q": [{
            id: 18,
            name: "Q市",
          },],
          "R": [{
            id: 19,
            name: "R市",
          },],
          "S": [{
            id: 20,
            name: "S市",
          },],
          "T": [{
            id: 21,
            name: "T市",
          },],
          "U": [{
            id: 22,
            name: "U市",
          },],
          "V": [{
            id: 23,
            name: "V市",
          },],
          "W": [{
            id: 24,
            name: "W市",
          },],
          "X": [{
            id: 25,
            name: "X市",
          },],
          "Y": [{
            id: 26,
            name: "Y市",
          },],
          "Z": [{
            id: 27,
            name: "Z市",
          },],
          "#": [{
            id: 28,
            name: "123市",
          },{
            id: 29,
            name: "456市",
          },],
        }
      }
    },
    created() {
      if(this.enableBigData){ // 开启大数据插入20000条测试数据
        for (let i = 0; i < 20000; i++) {
          this.listData.A.push({
            id: 1000 + i,
            name: "A市" + i,
          })
        }
      }
    },
    methods: {
      selectHandler(e) {
        console.log('选中城市', e) // 返回选中对象 {id: 1, name: "A市", customParam: "自定义属性"}
      }
    }
  }
属性 默认值 说明
data {} 绑定列表数据
placeholder 输入关键字查询 顶部查询框placeholder
useIndex true 启用右侧索引(默认启用,关闭需设置:useIndex='false')
isBigData false 启动表格大数据动态渲染(默认不启用,打开需设置isBigData或:isBigData='true')
事件 说明
select-item 点击列表内容触发,返回选中的对象

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问