更新记录

1.0.0（2021-04-15）

基于本公司开发时候情况 单独写了一个 ，

平台兼容性

cf-IndexedList

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

暂只支持插件市场下载 或者hbuildx插件安装，暂不支持npm

暂只支持小程序开发使用，可以自定义大小，不一定要全屏高度显示，可以放到布局分配好的某一块区域内，自由放置。

• 可以自定义列表的样式和内容，也可以直接修改样式来个性化展示

基本用法

在 template 中使用组件

<!-- 一般用法 -->
<cf-indexedList :list="list" height="100vh" @itemClick="itemClick" ></cf-indexedList>

<!-- 自定义列表用法 -->
  <cf-indexedList :list="list" height="60vh" >
    <template v-slot:letter="{item}">
      <text>{{item.letter+'---Ok'}}</text>
    </template>                 
    <template v-slot:itemArr="{item}">
      <view
        v-for="(item2, i2) in item.arr"
        :key="i2"
        class="cell_inner"
        @click="itemClick(item2)"                           
      >                 
        <view style="color:blue;">
          {{item2.label}}
        </view>
        {{item2.label}}
      </view>
    </template>  
  </cf-indexedList>

list : [{
        letter:'a',
        arr:[
          {
            label:'ab',
            id:'1'
          },
          {
            label:'ac',
            id:'2'
          }
        ]
      },
      {
        letter:'b',
        arr:[
          {
            label:'bb',
            id:'3'
          },
          {
            label:'bc',
            id:'4'
          }
        ]
      },
      {
        letter:'c',
        arr:[
          {
            label:'cb',
            id:'5'
          },
          {
            label:'cc',
            id:'6'
          }
        ]
      },
      {
        letter:'d',
        arr:[
          {
            label:'db',
            id:'7'
          },
          {
            label:'dc',
            id:'8'
          }
        ]
      },
      {
        letter:'e',
        arr:[
          {
            label:'eb',
            id:'9'
          },
          {
            label:'ec',
            id:'10'
          },
          {
            label:'ed',
            id:'11'
          }
        ]
      },
      {
        letter:'f',
        arr:[
          {
            label:'fb',
            id:'12'
          },
          {
            label:'fc',
            id:'13'
          },
          {
            label:'fd',
            id:'14'
          },
          {
            label:'fe',
            id:'15'
          },
          {
            label:'ff',
            id:'16'
          },
          {
            label:'fg',
            id:'17'
          }
        ]                   
      },
      {
        letter:'g',
        arr:[
          {
            label:'gb',
            id:'17'
          },
          {
            label:'gc',
            id:'18'
          },
          {
            label:'gd',
            id:'19'
          },
          {
            label:'ge',
            id:'20'
          },
          {
            label:'gf',
            id:'21'
          },
          {
            label:'gg',
            id:'22'
          }
        ]
      },
    ]

Props

list数据结构

事件

Slots