uv-ui

# List 列表

✈

组件名：uv-list > uv-list-item

点击下载&安装 (opens new window)

重构：1.0.6

List列表组件，包含基本列表样式、默认插槽机制、可扩展插槽机制、长列表性能优化、多端兼容。

在vue页面里，它默认使用页面级滚动，这样做的目的是性能更加友好。在app-nvue页面里，它默认使用原生list组件滚动，这样的长列表，在滚动出屏幕外后，系统会回收不可见区域的渲染内存资源，不会造成滚动越长手机越卡的问题。

uv-list组件是父容器，里面的核心是uv-list-item子组件，它代表列表中的一个可重复行，子组件可以无限循环。

uv-list-item有很多风格，uv-list-item组件通过内置的属性，满足一些常用的场景。当内置属性不满足需求时，可以通过扩展插槽来自定义列表内容，插槽包括：默认插槽（完全自定义内容）、具名插槽（header | body | footer），根据需求进行扩展。

内置属性可以覆盖的场景包括：导航列表、设置列表、小图标列表等，其他不能满足的场景使用插槽进行扩展。

uv-list不包含下拉刷新和上拉翻页。上拉翻页另见组件：uv-load-more (opens new window)

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ √ √ √ √ √

# 基本用法

  • 设置 title 属性，可以显示列表标题
  • 设置 disabled 属性，可以禁用当前项
<uv-list>
    <uv-list-item title="列表文字" ></uv-list-item>
    <uv-list-item :disabled="true" title="列表禁用状态" ></uv-list-item>
</uv-list>

# 多行内容显示

  • 设置 note 属性 ，可以在第二行显示描述文本信息
<uv-list>
    <uv-list-item title="列表文字" note="列表描述信息"></uv-list-item>
    <uv-list-item :disabled="true" title="列表禁用状态" note="列表描述信息"></uv-list-item>
</uv-list>

# 右侧显示角标、switch

  • 设置 show-badge 属性是否显示角标，设置 badge 属性可以显示角标内容，具体参数参考：uv-badge (opens new window)
  • 设置 show-switch 属性，可以显示 switch 开关
<uv-list>
    <uv-list-item  title="列表右侧显示角标" :show-badge="true" :badge="{value: '999+'}" ></uv-list-item>
    <uv-list-item title="列表右侧显示 switch"  :show-switch="true" @switchChange="switchChange" ></uv-list-item>
</uv-list>

# 左侧显示略缩图、图标

  • 设置 thumb 属性 ，可以在列表左侧显示略缩图
  • 设置 show-extra-icon 属性，并指定 extra-icon 可以在左侧显示图标
<uv-list>
	<uv-list-item 
		title="列表左侧带略缩图" 
		note="列表描述信息" 
		thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" 
		thumb-size="lg" 
		rightText="右侧文字">
	</uv-list-item>
	<uv-list-item :show-extra-icon="true" :extra-icon="{icon:'photo',color:'red'}" title="列表左侧带扩展图标">
	</uv-list-item>
</uv-list>

# 开启点击反馈和右侧箭头

  • 设置 clickable 为 true ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 click 事件
  • 设置 link 属性，会自动开启点击反馈，并给列表右侧添加一个箭头
  • 设置 to 属性，可以跳转页面，link 的值表示跳转方式，如果不指定，默认为 navigateTo
<uv-list>
	<uv-list-item title="开启点击反馈" clickable @click=""></uv-list-item>
	<uv-list-item title="默认 navigateTo 方式跳转页面" link to="/pages/vue/index/index" @click="($event,1)"></uv-list-item>
	<uv-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index" @click="($event,1)"></uv-list-item>
</uv-list>

# 自定义内容

<uv-list>
	<uv-list-item>自定义内容1</uv-list-item>
	<uv-list-item>自定义内容2</uv-list-item>
	<uv-list-item>自定义内容3</uv-list-item>
</uv-list>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# List Props

参数 类型 默认值 说明
border Boolean false 是否显示边框
border-color String #dadbde 边框颜色
direction String row 控制子组件排版方向，使用默认插槽自定义内容时不生效
padding String '20rpx 30rpx' 控制子组件内边距，使用默认插槽自定义内容时不生效
customStyle Object | String - 自定义外部样式

# ListItem Props

参数 类型 默认值 说明
border Boolean false 是否显示边框
title String - 标题
note String - 描述
ellipsis Number 0 title 是否溢出隐藏省略显示，可选值1-5
thumb String - 左侧缩略图，若thumb有值，则不会显示扩展图标
thumb-size String medium 略缩图尺寸，可选值，lg: 大图; medium: 一般; sm: 小图;
show-badge Boolean false 是否显示数字角标
badge Object - 数字角标参数，如上示例 ,更多参数：uv-badge (opens new window)
right-text String - 右侧文字内容
disabled Boolean false 是否禁用
show-arrow Boolean true 是否显示箭头图标
link String navigateTo 新页面跳转方式，可选值见下表
to String - 新页面跳转地址，如填写此属性，click 会返回页面是否跳转成功
clickable Boolean false 是否开启点击反馈
show-switch Boolean false 是否显示Switch
switch-checked Boolean false Switch是否被选中
show-extra-icon Boolean false 左侧是否显示扩展图标
extra-icon Object - 扩展图标参数，格式为 {color: '#4cd964',size: '22',name: 'photo'}，参考 uv-icon (opens new window)
direction String row 排版方向，可选值，row:水平排列; column:垂直排列; 3个插槽是水平排还是垂直排，也受此属性控制
customStyle Object | String - 自定义外部样式
属性名 说明
navigateTo 同 uni.navigateTo()
redirectTo 同 uni.reLaunch()
reLaunch 同 uni.reLaunch()
switchTab 同 uni.switchTab()

# List Events

事件名 说明 返回参数
@scroll nvue模式，滚动时触发 e
@scrolltolower nvue模式，滚动到底部触发 -

# ListItem Events

事件名 说明 返回参数
@click 点击 uv-list-item 触发事件，需开启点击反馈：:clickable="true" -
@switchChange 点击切换 Switch 时触发，需显示 switch e={value:checked}

# ListItem Slots

名称 说明
default 默认插槽，完全自定义内容时推荐该方式，示例如上：自定义内容
header 左/上内容插槽，可完全自定义默认显示
body 中间内容插槽，可完全自定义中间内容
footer 右/下内容插槽，可完全自定义右侧内容

← IndexList 索引列表 →