wxc-indexlist

An indexed list, can be navigated by index.

Rule：

Support to set up columns and group presentations.
Basic component that`s often used in contact lists and city lists.

Demo【group、list】

Code Example

<template>
  <div class="container">
    <wxc-indexlist :normal-list="list.normalList"
                   :hot-list-config="hotListConfig"
                   :city-location-config="cityLocationConfig"
                   @wxcIndexlistItemClicked="wxcIndexlistItemClicked"
                   :show-index="showIndex"></wxc-indexlist>
  </div>
</template>

<script>
  const modal = weex.requireModule('modal');
  import { WxcIndexlist } from 'weex-ui';
  import {datelist} from 'data.js'
  export default {
    components: { WxcIndexlist },
    data: () => ({
      list: dataList,
      showIndex: true,
      hotListConfig: {
        type: 'group',
        title: 'hot',
        list: dataList.hotList
      },
      cityLocationConfig: {
        type: 'group',
        title: 'location',
        list: [{ name: 'hangzhou', isLocation: true }]
      }
    }),
    methods: {
      wxcIndexlistItemClicked (e) {
        console.log(e)
      }
    }
  };
</script>

More details can be found in here

API

Prop	Type	Required	Default	Description
list	`Array`	`Y`	`[]`	data list (*1)
hot-list-config	`Object`	`N`	`{}`	hot list (*2)
city-location-config	`Object`	`N`	`{}`	special、positioning configuration (*3)
show-index	`Boolean`	`N`	`true`	whether to show index nav
only-show-list	`Boolean`	`N`	`false`	whether to only show list *4)
nav-style	`Object`	`N`	`{}`	index sidebar custom style
need-animation	`Boolean`	`N`	`true`	whether to need index nav animation

*1：The configuration items of the normal list, Detailed data format: demo/data.js#L16
*2：Some index list need in front of the normal list shows a list of popular form ,Support group,list type, Detailed data format: demo/data.js#L2:
```
hotListConfig: {
        type: 'group',
        title: 'hot',
        list: dataList.hotList
      }
```

*3：Added a city-location-config for setting location city.

cityLocationConfig: {
        type: 'group',
        title: 'location',
        list: [{ name: 'hangzhou', isLocation: true }]
      }

*4：Whether to only display list items, remove location, hot display, often used for search results display.

Slot

<slot name="head"></slot>: A custom slot can be inserted at the beginning of the list, and nav-style can be introduced to compatible the styles.

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

Event

`@wxcIndexlistItemClicked="wxcIndexlistItemClicked"`

Completely custom style

If the above default styles do not meet the requirements, you can cover the original style by passing the corresponding parameters.