wxml

<ui-tree list="{{indexList}}" class="tab-boxer" >
  <view slot="scroll-top" ></view>  <!--顶部结构-->
  <view slot="scroll-bottom" ></view>  <!--底部结构-->
</ui-tree>

js

const Pager = require('../../components/aotoo/core/index')
const mkIndexList = require('../../components/modules/indexlist')

Pager({
  data: {
    lockConfig: mkIndexList(
      data, // 列表数据
      {
      attachButton: ['删除'],  // 侧滑按钮
      tap(e, param, inst){ // 子项点击事件
        inst.update({title: '索引列表项'})
      }
    })
  },
})

mkIndexList
生成索引列表配置
data
列表数据
tap
列表项点击响应方法
- e
  原生event事件
- param
  此处无用
- inst
  触发事件的子项实例，该实例支持一系列方法，参考item组件
attachButton
左滑按钮，由数组构成

数据结构

索引列表由tree组件构建，tree组件由列表组件变化而来，tree组件需要由特定格式的数据来构建列表项，tree组件与列表组件的区别是它将输出层次性结构

const mockData = [
  {idf: 'A', title: 'A'},  // A、B、C会自动成为索引
  {img, title: '选项-1', parent: "A" },
  {img, title: '选项-1', parent: "A"},
  {img, title: '选项-1', parent: "A"},
  {idf: 'B', title: 'B'},
  {img, title: '选项-2', parent: "B"},
  {img, title: '选项-2', parent: "B"},
  {img, title: '选项-2', parent: "B"},
  {idf: 'C', title: 'C'},
  {img, title: '选项-2', parent: "C"},
  {img, title: '选项-2', parent: "C"},
  {img, title: '选项-2', parent: "C"},
]

数据子项由item组件构建，参考item组件

title
配置数据子项的标题

img
配置数据子项的图片

idf
{String}, 父级属性，该子项title会出现在索引列表中

parent
{String}，子项属性，该属性指向某一个父级属性

组件选项

使用mkIndexList方法构建索引列表

mkIndexList(id, data, options)

id
{String|Array} 指定唯一id，或直接配置列表数据

data
{Array} 扁平化的数组数据

options.enableTips
{ Boolean } 是否显示索引提示

options.enableTouch
{ Boolean } 是否允许索引区域滑动切换分类，默认true， false时只能通过tap方式来切换分类数据

options.attachButton
{ String | Object } 允许并指定左滑菜单，需定义响应方法onAttachButton在page配置中

options.tap(e, param, inst)
{String|Function} 列表项的响应方法，String类型需要在page中定义响应方法

e
event，小程序event对象
param
暂时没用到
inst
tap所对应的item项，支持api(update, addClass, removeClass等等)

配置实例

如何响应列表项的tap事件

Pager({
  indexList: mkIndexList(mockData, {
      tap(e, param, inst){  //修改点中的选项，并更改其内容  
        // 更新内容  
        inst.update({title: '需要修改的文本内容'})  
        // 更新图片/文字
        inst.update({title: '需要修改的文本内容', img: {src: '图片路径', itemClass: '图片类名', mode: '图片显示类型'}})  
        // 添加类  
        inst.addClass('类名')
        // 删除类名
        inst.removeClass('类名') 
      }
    })
})

如何响应索引项tap事件

Pager({
  onReady(){
    let instance = this.getElementsById(id)  
    instance.hooks.on('onTouchStart', function(param){
      console.log(param)
      this.intoView(param.dataset.id)  // 跳转指定分类  
    })
  }
})

如何响应索引项划过某分类标签事件

Pager({
  onReady(){
    let instance = this.getElementsById(id)  
    instance.hooks.on('onTouchPassPoint', function (param) {
      console.log(param)
      this.intoView(param.dataset.id)  // 跳转指定分类  
    })
  }
})

小程序联系人索引列表组件(indexlist)