uniapp组件-ui-list列表

目录

一、基本用法

二、显示图标或图片

三、右侧显示 switch/badge

四、使用插槽

---

 官方示例：https://ext.dcloud.net.cn/plugin?id=24

列表组件可以在其中使用图标、略缩图或放置任何你想放的元素，使用场景如：导航菜单、列表、设置中心排版等

基于uni-list的聊天列表组件：https://blog.csdn.net/qq_40323256/article/details/114298122

一、基本用法

showArrow可以有展开的箭头符号。link不仅有展开的箭头符号，还有点击反馈效果

<template>
	<view>
		<uni-list>
			<uni-list-item title="列表文字" rightText="右侧文字" />
			<uni-list-item title="列表文字" note="列表描述信息" rightText="右侧文字" />
			<uni-list-item title="列表禁用状态" rightText="右侧文字" :disabled="true" />
			<uni-list-item title="展示箭头" showArrow />
			<uni-list-item title="展示箭头" showArrow rightText="右侧文字" />
			<uni-list-item title="弹窗提示.加了clickable点击时有按压效果" clickable @click="onClick" />
			<uni-list-item title="页面跳转,可返回" @click="onClick" :to="`./ad`"/>
			<uni-list-item title="关闭当前页面打开新页面" link="redirectTo" to="./chat" @click="onClick" />
			<uni-list-item title="跳转到另一个页面,可返回" link="navigateTo" to="./chat" @click="onClick" />
			<uni-list-item :ellipsis="1" title="文字溢出隐藏.:ellipsis=1表示超长文字显示一行.以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字" showArrow rightText="右侧文字" />
			<uni-list-item :ellipsis="2" title="文字溢出隐藏.:ellipsis=2表示超长文字显示二行,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字" showArrow rightText="右侧文字" />
			<uni-list-item title="内容全部显示.以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字" showArrow rightText="右侧文字" />
		</uni-list>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {};
		},
		methods: {
			onClick(e) {
				uni.showToast({
					title: '点击反馈'
				});
			}
		}
	};
</script>

二、显示图标或图片

<template>
	<view>
		<uni-list>
			<uni-list-item title="列表左侧带略缩图" note="列表描述信息" showArrow thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" thumb-size="sm" rightText="小图" />
			<uni-list-item title="列表左侧带略缩图" note="列表描述信息" showArrow thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" thumb-size="base" rightText="默认" />
			<uni-list-item title="列表左侧带略缩图" note="列表描述信息" showArrow thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" thumb-size="lg" rightText="大图" />
			<uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon" title="列表左侧带扩展图标" />
		</uni-list>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type:'heart' //icon名称
				}
			};
		}
	};
</script>

三、右侧显示 switch/badge

<template>
	<view>
		<uni-list>
			<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon" :show-badge="true" badge-text="99" showArrow title="右侧带badge" @switchChange="switchChange" :disabled="true"/>
			<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon" :show-switch="true" title="右侧带 switch" @switchChange="switchChange" :switch-checked="true"/>
		</uni-list>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type:'heart' //icon名
				}
			};
		},
		methods: {
			switchChange(e) {
				uni.showToast({
					title: '当前是否选中:' + e.value,
					icon: 'none'
				});
			}
		}
	};
</script>

四、使用插槽

<template>
	<view>
		<uni-list>
			<uni-list-item>
				<view slot="body" style="flex-direction: row;align-items: center;">
					<text class="slot-text">默认插槽</text>
					<uni-badge text="2" type="primary" />
				</view>
			</uni-list-item>
			<uni-list-item title="自定义右侧插槽" note="列表描述信息" link>
				<template slot="header">
					<image style="width: 30px;height: 30px;" src="/static/logo.png" mode="widthFix"/>
				</template>
			</uni-list-item>
			<uni-list-item>
				<view slot="header">
					<image style="width: 30px;height: 30px;" src="/static/logo.png" mode="widthFix"/>
				</view>
				<text slot="body" class="slot-text">自定义左侧插槽</text>
				<template slot="footer">
					<image style="width: 30px;height: 30px;" src="/static/logo.png" mode="widthFix"/>
				</template>
			</uni-list-item>
		</uni-list>
	</view>
</template>
<style>
	.slot-text {
		flex: 1;
		font-size: 14px;
		color: #4cd964;
		margin-right: 10px;
	}
</style>