• 基本使用

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

    1. const cityData = [
    2.   {
    3.     "name": "★Hot City",
    4.     "items": [
    5.       {
    6.         "name": "BEIJING",
    7.         "value": 1
    8.       },
    9.       {
    10.         "name": "SHANGHAI",
    11.         "value": 2
    12.       }
    13.     ]
    14.   },
    15.   {
    16.     "name": "A",
    17.     "items": [
    18.       {
    19.         "name": "ANSHAN",
    20.         "value": 3
    21.       },
    22.       {
    23.         "name": "ANQING",
    24.         "value": 4
    25.       }
    26.     ]
    27.   }
    28. ]
    29.  
    30. export default {
    31.   data() {
    32.     return {
    33.       title: 'Current City: BEIJING',
    34.       cityData: cityData
    35.     }
    36.   },
    37.   methods: {
    38.     selectItem(item) {
    39.       console.log(item.name)
    40.     },
    41.     clickTitle(title) {
    42.       console.log(title)
    43.     }
    44.   }
    45. }
    • 自定义插槽
    1.   data() {
    2.     return {
    3.       cityData: cityData
    4.     }
    5.   },
    6.   methods: {
    7.     selectItem(item) {
    8.       console.log(item.name)
    9.     },
    10.     clickTitle(title) {
    11.       console.log(title)
    12.     }
    13.   }
    14. }
    15.  
    16.  
    17. // 自定义项的样式
    18. .custom-item
    19.   position: relative
    20.   height: 70px
    21.   line-height: 70px
    22.   padding: 0 16px
    23.   font-size: - fontsize-medium
    24.  
    25. // 用自定义样式，覆写内置的默认样式
    26. .cube-index-list-content
    27.   background-color: #222
    28.   color: #909090
    29. .cube-index-list-anchor
    30.   background-color: #333
    31.   height: 30px
    32.   line-height: 30px
    33.   padding: 0 0 0 20px
    34. .cube-index-list-nav
    35.   padding: 20px 0
    36.   border-radius: 10px
    37.   background: rgba(0,0,0,.3)
    38.   >ul
    39.     >li
    40.       padding: 3px
    41.       font-size: 12px
    42.       color: #909090
    43.       &.active
    44.         color: #ffcd32
    • 上拉加载

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

    1. export default {
    2.   data() {
    3.     return {
    4.       title: 'Current City: BEIJING',
    5.       data: cityData.slice(0, 4)
    6.     }
    7.   methods: {
    8.     selectItem(item) {
    9.       console.log(item.name)
    10.     },
    11.     clickTitle(title) {
    12.       console.log(title)
    13.     },
    14.     onPullingUp() {
    15.       // Mock async load.
    16.       setTimeout(() => {
    17.         const length = this.data.length
    18.         if (length < cityData.length) {
    19.           // Update data.
    20.           this.data.push(cityData[length])
    21.         }
    22.         // Call forceUpdate after finishing data load.
    23.         this.- refs.indexList.forceUpdate()
    24.       }, 1000)
    25.     }
    26.   }
    27. }
    • 下拉刷新
      可以通过 pullDownRefresh 属性开启下拉刷新功能，具体配置同 Scroll 组件的 options.pullDownRefresh。
      1. export default {
      2. data() {
      3. return {
      4.   title: 'Current City: BEIJING',
      5.   data: cityData,
      6.   pullDownRefresh: {
      7.     stop: 55
      8.   }
      9. }
      10. },
      11. methods: {
      12. selectItem(item) {
      13.   console.log(item.name)
      14. },
      15. clickTitle(title) {
      16.   console.log(title)
      17. },
      18. onPullingDown() {
      19.   // Mock async load.
      20.   setTimeout(() => {
      21.     // Update data.
      22.     this.data[1].items.push(...cityData[1].items)
      23.     // Call forceUpdate after finishing data load.
      24.     this.- refs.indexList.forceUpdate()
      25.   }, 1000)
      26. }
      27. }
      28. }
    • data 子配置项
      data 是数组，表示的是一组数据，每一项配置：

    原文: