IndexList

索引列表，提供了列表索引的功能，也是一个基于better-scroll进行封装的组件。

示例

• 基本使用

构造如示例中 cityData 这样结构的数据，传入 cube-index-list 组件的 data 属性。

<cube-index-list :data="cityData" :title="title" @select="selectItem" @title-click="clickTitle"></cube-index-list>

const cityData = [
  {
    "name": "★Hot City",
    "items": [
      {
        "name": "BEIJING",
        "value": 1
      },
      {
        "name": "SHANGHAI",
        "value": 2
      }
    ]
  },
  {
    "name": "A",
    "items": [
      {
        "name": "ANSHAN",
        "value": 3
      },
      {
        "name": "ANQING",
        "value": 4
      }
    ]
  }
]
 
export default {
  data() {
    return {
      title: 'Current City: BEIJING',
      cityData: cityData
    }
  },
  methods: {
    selectItem(item) {
      console.log(item.name)
    },
    clickTitle(title) {
      console.log(title)
    }
  }
}

• 自定义插槽

除了默认结构，你还可以根据自己的需要自定义每一项的内容。如下所示，将你的自定义内容项填入cube-index-list-item的插槽。除非你真的知道自己在做什么，否则不要修改cube-index-list-group和cube-index-list-item的用法。

<cube-index-list :data="cityData">
  <cube-index-list-group v-for="(group, index) in cityData" :key="index" :group="group">
    <cube-index-list-item v-for="(item, index) in group.items" :key="index" :item="item" @select="selectItem">
      <div class="custom-item">我是自定义 {{item.name}}</div>
    </cube-index-list-item>
  </cube-index-list-group>
</cube-index-list>

export default {
  data() {
    return {
      cityData: cityData
    }
  },
  methods: {
    selectItem(item) {
      console.log(item.name)
    },
    clickTitle(title) {
      console.log(title)
    }
  }
}
 
 
// 自定义项的样式
.custom-item
  position: relative
  height: 70px
  line-height: 70px
  padding: 0 16px
  font-size: - fontsize-medium
 
// 用自定义样式，覆写内置的默认样式
.cube-index-list-content
  background-color: #222
  color: #909090
.cube-index-list-anchor
  background-color: #333
  height: 30px
  line-height: 30px
  padding: 0 0 0 20px
.cube-index-list-nav
  padding: 20px 0
  border-radius: 10px
  background: rgba(0,0,0,.3)
  >ul
    >li
      padding: 3px
      font-size: 12px
      color: #909090
      &.active
        color: #ffcd32

• 上拉加载

可以通过 pullUpLoad 属性开启上拉加载功能，具体配置同 Scroll 组件的 options.pullUpLoad。

<cube-index-list ref="indexList" :data="data" :title="title" :pullupload="true" @select="selectItem" @title-click="clickTitle" @pulling-up="onPullingUp">
</cube-index-list>

export default {
  data() {
    return {
      title: 'Current City: BEIJING',
      data: cityData.slice(0, 4)
    }
  },
  methods: {
    selectItem(item) {
      console.log(item.name)
    },
    clickTitle(title) {
      console.log(title)
    },
    onPullingUp() {
      // Mock async load.
      setTimeout(() => {
        const length = this.data.length
        if (length < cityData.length) {
          // Update data.
          this.data.push(cityData[length])
        }
        // Call forceUpdate after finishing data load.
        this.- refs.indexList.forceUpdate()
      }, 1000)
    }
  }
}

• 下拉刷新
  可以通过 pullDownRefresh 属性开启下拉刷新功能，具体配置同 Scroll 组件的 options.pullDownRefresh。

  <cube-index-list ref="indexList" :data="data" :title="title" :pulldownrefresh="pullDownRefresh" @select="selectItem" @title-click="clickTitle" @pulling-down="onPullingDown">
  </cube-index-list>

  export default {
  data() {
  return {
    title: 'Current City: BEIJING',
    data: cityData,
    pullDownRefresh: {
      stop: 55
    }
  }
  },
  methods: {
  selectItem(item) {
    console.log(item.name)
  },
  clickTitle(title) {
    console.log(title)
  },
  onPullingDown() {
    // Mock async load.
    setTimeout(() => {
      // Update data.
      this.data[1].items.push(...cityData[1].items)
      // Call forceUpdate after finishing data load.
      this.- refs.indexList.forceUpdate()
    }, 1000)
  }
  }
  }

Props 配置

• data 子配置项
  data 是数组，表示的是一组数据，每一项配置：

items 数组中的每一项必须是对象，且包含 name 属性用于显示内容；例如 items: [{name: 'xx', …}, …]

插槽

事件

原文:

https://didi.github.io/cube-ui/#/zh-CN/docs/index-list