wxc-indexlist

Weex 索引列表组件, 可以通过索引快速定位

规则：

  • 支持成组、成列显示
  • 常用于联系人列表、城市列表的基础组件

    Demo【group、list】

wxc-indexlist 索引列表 - 图1 wxc-indexlist 索引列表 - 图2 wxc-indexlist 索引列表 - 图3

使用方法

  1. <template>
  2.   <div class="container">
  3.     <wxc-indexlist :normal-list="list.normalList"
  4.                    :hot-list-config="hotListConfig"
  5.                    :city-location-config="cityLocationConfig"
  6.                    @wxcIndexlistItemClicked="wxcIndexlistItemClicked"
  7.                    :show-index="showIndex"></wxc-indexlist>
  8.   </div>
  9. </template>
  11. <script>
  12.   const modal = weex.requireModule('modal');
  13.   import { WxcIndexlist } from 'weex-ui';
  14.   import {datelist} from 'data.js'
  15.   export default {
  16.     components: { WxcIndexlist },
  17.     data: () => ({
  18.       list: dataList,
  19.       showIndex: true,
  20.       hotListConfig: {
  21.         type: 'group',
  22.         title: '热门',
  23.         list: dataList.hotList
  24.       },
  25.       cityLocationConfig: {
  26.         type: 'group',
  27.         title: '定位',
  28.         list: [{ name: '杭州', isLocation: true }]
  29.       }
  30.     }),
  31.     methods: {
  32.       wxcIndexlistItemClicked (e) {
  33.         console.log(e)
  34.       }
  35.     }
  36.   };
  37. </script>

更详细代码可以参考 demo

可配置参数

Prop Type Required Default Description
list Array Y [] 索引列表的数据项 (注1)
hot-list-config Object N {} 热门列表项目配置 (注2)
city-location-config Object N {} 特殊、城市定位逻辑配置 (注3)
show-index Boolean N true 是否显示索引
only-show-list Boolean N false 是否只显示列表 (注4)
nav-style Object N {} 索引侧边栏样式自定义
  • 注1：正常列表的配置项目，采用list的形式展示，详细可见 demo/data.js#L16

  • 注2：有些索引列表需要在正常列表前面展示一个热门列表，同时支持group、list形式，格式可见demo/data.js#L2，整体配置为

    hotListConfig: {

    1.    type: &#39;group&#39;,
    2.    title: &#39;热门&#39;,
    3.    list: dataList.hotList
    4.  }Click to copy

  • 注3：特殊的城市列表需要展示定位逻辑，此处新增city-location-config配置，其他列表不需要配置，数据格式为，如果需要显示定位icon，传入isLocation

    cityLocationConfig: {

    1.    type: &#39;group&#39;,
    2.    title: &#39;定位&#39;,
    3.    list: [{ name: &#39;杭州&#39;, isLocation: true }]
    4.  }Click to copy

  • 注4：是否只显示列表项目，去除定位、热门显示，常用于搜索结果的显示

    Slot

<slot name="head"></slot>: 可以在列表最开头插入一个自定义 slot ，同时可以传入nav-style 来兼容样式

  1. <wxc-indexlist :normal-list="list.normalList"
  2.                    :hot-list-config="hotListConfig"
  3.                    :city-location-config="cityLocationConfig"
  4.                    :show-index="showIndex"
  5.                    @wxcIndexlistItemClicked="wxcIndexlistItemClicked">
  6.                 <div slot="head"><text>aaaaaa</text></div>       
  7. </wxc-indexlist>

wxc-indexlist 索引列表 - 图4

事件回调

  1. `@wxcIndexlistItemClicked="wxcIndexlistItemClicked"`

完全自定义样式

  • 假如上述默认样式不符合要求，可以通过传入相对应的参数来覆盖原有的样式
    wxc-indexlist 索引列表 - 图5

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-indexlist/