wxc-indexlist
优质
小牛编辑
122浏览
2023-12-01
Weex 索引列表组件, 可以通过索引快速定位
规则:
- 支持成组、成列显示
- 常用于联系人列表、城市列表的基础组件
Demo【group、list】
![](https://imgs.xnip.cn/cj/docimg/693/a1feb7b7-1ded-4e31-b425-f7f117d7b205.gif)
![](https://imgs.xnip.cn/cj/docimg/693/64ecbbd7-700c-4d7f-8e3d-ef04c74655b9.gif)
![](https://imgs.xnip.cn/cj/docimg/693/9905648e-1a19-4376-acb6-f571a43c4181.png)
使用方法
<template>
<div>
<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: '热门',
list: dataList.hotList
},
cityLocationConfig: {
type: 'group',
title: '定位',
list: [{ name: '杭州', isLocation: true }]
}
}),
methods: {
wxcIndexlistItemClicked (e) {
console.log(e)
}
}
};
</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 | {} | 索引侧边栏样式自定义 |
need-animation | Boolean | N | true | 索引定位时候是否需要动画 |
注1:正常列表的配置项目,采用list的形式展示,详细可见 demo/data.js#L16
注2:有些索引列表需要在正常列表前面展示一个
热门
列表,同时支持group
、list
形式,格式可见demo/data.js#L2,整体配置为hotListConfig: { type: 'group', title: '热门', list: dataList.hotList }
注3:特殊的城市列表需要展示定位逻辑,此处新增city-location-config配置,其他列表不需要配置,数据格式为,如果需要显示定位icon,传入isLocation
cityLocationConfig: { type: 'group', title: '定位', list: [{ name: '杭州', isLocation: true }] }
注4:是否只显示列表项目,去除定位、热门显示,常用于搜索结果的显示
Slot
<slot name="head"></slot>
: 可以在列表最开头插入一个自定义 slot ,同时可以传入nav-style 来兼容样式
<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>
![](https://imgs.xnip.cn/cj/docimg/693/57e566e1-0320-4319-a304-c417828983d7.jpg)
事件回调
`@wxcIndexlistItemClicked="wxcIndexlistItemClicked"`
完全自定义样式
- 假如上述默认样式不符合要求,可以通过传入相对应的参数来覆盖原有的样式
![](https://imgs.xnip.cn/cj/docimg/693/2bddcd1f-ebca-44db-a26d-4619d1a00028.jpg)