更新记录
1.0.2(2021-08-26) 下载此版本
说明
1.0.1(2021-08-26) 下载此版本
说明
1.0.0(2021-08-26) 下载此版本
列表添加定位。可以让列表不占满屏
查看更多平台兼容性
IndexedList 索引列表
组件名:luyj-indexed-list 代码块:
luyj-indexed-list
说明
用于展示索引列表。在官方[uni-indexed-list 索引列表](https://ext.dcloud.net.cn/plugin?id=375)的基础上,添加了定位。
总体来说,除了定位外,这个插件也有一些问题,没解决。本人已打算换一个了。只是既然稍微改造了它,就保留下来做纪念了。
1. 没有搜索功能。
2. 当索引量大的时候(不如再添加1,2,3,4,5……),右侧索引溢出。点击的位置和实际看到的索引不一致。
3. 每一个item只展示字符串的形式,不方便点击后的下一步操作。
4. 数据量大的时候,不支持懒加载。
安装方式
本组件符合easycom规范,HBuilderX 2.5.5
起,只需将本组件导入项目,在页面template
中即可直接使用,无需在页面中import
和注册components
。
如需通过npm
方式使用uni-ui
组件,另见文档:https://ext.dcloud.net.cn/plugin?id=55
基本用法
在 template
中使用组件
<uni-indexed-list :options="list" :showSelect="false" @click="bindClick"></uni-indexed-list>
API
IndexedList Props
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
options | Object | - | 索引列表需要的数据对象 |
showSelect | Boolean | - | 展示模式,true 为展示默认,false 为选择模式,默认为 false |
postion | Object | {top : 0,left : 0, right : 0,bottom : 0} | 定位,默认单位px |
options 数据格式说明
[{
"letter": "A",
"data": [
"阿克苏机场",
"阿拉山口机场",
"阿勒泰机场",
"阿里昆莎机场",
"安庆天柱山机场",
"澳门国际机场"
]
}, {
"letter": "B",
"data": [
"保山机场",
"包头机场",
"北海福成机场",
"北京南苑机场",
"北京首都国际机场"
]
}]
postion属性说明 | 属性 | 类型 | 默认值 | 说明 |
---|---|---|---|---|
top | Number | 0 | 相对窗口的top定位 | |
left | Number | 0 | 相对窗口的left定位 | |
right | Number | 0 | 相对窗口的right定位 | |
bottom | Number | 0 | 相对窗口的bottom |
IndexedList Events
事件名 | 说明 | 返回值 |
---|---|---|
click | 点击列表事件 ,返回当前选择项的事件对象 | - |
组件示例
点击查看:https://hellouniapp.dcloud.net.cn/pages/extUI/indexed-list/indexed-list