更新记录
0.0.1(2023-02-13)
下载此版本
基础列表;
支持列表搜索;
平台兼容性
List 列表
组件名:wgh-list
代码块: uList
、uListItem
关联组件:uni-list
、uni-list-item
、uni-badge
、uni-icons
、uni-list-chat
、uni-list-ad
基本用法
- 设置
title
属性,可以显示列表标题
- 设置
disabled
属性,可以禁用当前项
<template>
<view class="content">
<wgh-list searchPlaceholder="11212" :list="list" @click='onClick'></wgh-list>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
list: [
{
id: '12',
text: '122'
},
{
id: '34',
text: '344'
},
]
}
},
onLoad() {
},
methods: {
onClick(e){
console.log(e, 'e--0');
}
}
}
</script>
List Props
属性名 |
类型 |
默认值 |
说明 |
searchPlaceholder |
String |
请输入搜索内容 |
搜索框展位内容 |
listBorder |
Boolean |
true |
是否显示边框[list] |
listItemBorder |
Boolean |
true |
是否显示边框[list-item] |
ListItem Props
属性名 |
类型 |
默认值 |
说明 |
title |
String |
- |
标题 |
note |
String |
- |
描述 |
ellipsis |
Number |
0 |
title 是否溢出隐藏,可选值,0:默认; 1:显示一行; 2:显示两行;【nvue 暂不支持】 |
thumb |
String |
- |
左侧缩略图,若thumb有值,则不会显示扩展图标 |
thumbSize |
String |
medium |
略缩图尺寸,可选值,lg:大图; medium:一般; sm:小图; |
showBadge |
Boolean |
false |
是否显示数字角标 |
badgeText |
String |
- |
数字角标内容 |
badgeType |
String |
- |
数字角标类型,参考uni-icons |
badgeStyle |
Object |
- |
数字角标样式,使用uni-badge的custom-style参数 |
rightText |
String |
- |
右侧文字内容 |
disabled |
Boolean |
false |
是否禁用 |
showArrow |
Boolean |
true |
是否显示箭头图标 |
link |
String |
navigateTo |
新页面跳转方式,可选值见下表 |
to |
String |
- |
新页面跳转地址,如填写此属性,click 会返回页面是否跳转成功 |
clickable |
Boolean |
false |
是否开启点击反馈 |
showSwitch |
Boolean |
false |
是否显示Switch |
switchChecked |
Boolean |
false |
Switch是否被选中 |
showExtraIcon |
Boolean |
false |
左侧是否显示扩展图标 |
extraIcon |
Object |
- |
扩展图标参数,格式为 {color: '#4cd964',size: '22',type: 'spinner'} ,参考 uni-icons |
direction |
String |
row |
排版方向,可选值,row:水平排列; column:垂直排列; 3个插槽是水平排还是垂直排,也受此属性控制 |
Link Options
属性名 |
说明 |
navigateTo |
同 uni.navigateTo() |
redirectTo |
同 uni.reLaunch() |
reLaunch |
同 uni.reLaunch() |
switchTab |
同 uni.switchTab() |
ListItem Events
事件称名 |
说明 |
返回参数 |
click |
点击 uniListItem 触发事件,需开启点击反馈 |
- |
switchChange |
点击切换 Switch 时触发,需显示 switch |
e={value:checked} |