1. Toy模板网首页
  2. > Toy博客

uniapp扩展组件---uni-list

10月前 作者：荣在心中度 分类：Toy博客 阅读(35) 违法举报

这篇具有很好参考价值的文章主要介绍了uniapp扩展组件---uni-list。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

文章目录

    • 基本用法
    • 多行内容显示
    • 右侧显示角标、switch
    • 左侧显示略缩图、图标
    • 开启点击反馈和右侧箭头
    • 聊天列表示例

介绍：

组件名：uni-list

代码块： uList、uListItem 

关联组件：

uni-list-item、

uni-badge、

uni-icons、

uni-list-chat

点击下载&安装

文章内容

一、Api属性以及基础用法

点击下方查看：

查看uni-list  Api

基础用法：

属性
  • 设置 title 属性，可以显示列表标题
  • 设置 disabled 属性，可以禁用当前项
用法 
<uni-list>
	<uni-list-item  title="列表文字" ></uni-list-item>
	<uni-list-item :disabled="true" title="列表禁用状态" ></uni-list-item>
</uni-list>
二、多行内容显示
属性
  • 设置 note 属性 ，可以在第二行显示描述文本信息
用法 
<uni-list>
	<uni-list-item title="列表文字" note="列表描述信息"></uni-list-item>
	<uni-list-item :disabled="true" title="列表文字" note="列表禁用状态"></uni-list-item>
</uni-list>
三、右侧显示角标、switch
属性
  • 设置 show-badge 属性 ，可以显示角标内容
  • 设置 show-switch 属性，可以显示 switch 开关
用法 
<uni-list>
	<uni-list-item  title="列表右侧显示角标" :show-badge="true" badge-text="12" ></uni-list-item>
	<uni-list-item title="列表右侧显示 switch"  :show-switch="true"  @switchChange="switchChange" ></uni-list-item>
</uni-list>
四、左侧显示略缩图、图标
属性
  • 设置 thumb 属性 ，可以在列表左侧显示略缩图
  • 设置 show-extra-icon 属性，并指定 extra-icon 可以在左侧显示图标
用法 
 <uni-list>
 	<uni-list-item title="列表左侧带略缩图" note="列表描述信息" thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
 	 thumb-size="lg" rightText="右侧文字"></uni-list-item>
 	<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" title="列表左侧带扩展图标" ></uni-list-item>
</uni-list>
五、开启点击反馈和右侧箭头
属性
  • 设置 clickable 为 true ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 click 事件
  • 设置 link 属性，会自动开启点击反馈，并给列表右侧添加一个箭头
  • 设置 to 属性，可以跳转页面，link 的值表示跳转方式，如果不指定，默认为 navigateTo
用法 

<uni-list>
	<uni-list-item title="开启点击反馈" clickable  @click="onClick" ></uni-list-item>
	<uni-list-item title="默认 navigateTo 方式跳转页面" link to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
	<uni-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
</uni-list>
六、聊天列表示例

使用uni-list-chat制作一个聊天列表

同时使用uni-list的switch控制显示

<template>
	<view>
		<uni-list>
			<uni-list-item title="学习列表组件" 
			note="uni-list-item的内容" 
			thumb="../../static/uni.png" 
			thumbSize="lg"
			showBadge="true"			
			right-text="2023年7月27日11:42:51"
			showArrow="true"
			link="reLaunch"
			to="../index/index"//需要跳转的页面
			>
			</uni-list-item>
			 
			 <uni-list-item
			title="uni-list-chat的应用"
			showSwitch="true"
			switch-checked="true"
			@switchChange="bindswitchChange"
			>
				
			</uni-list-item>
		</uni-list>
		
		
		
	<view v-if="choose===true">
		<uni-list>
			<uni-list :border="true">
				<!-- 显示圆形头像 -->
				<uni-list-chat @click="bindChatChange" :avatar-circle="true" clickable title="uni-app" avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" note="您收到一条新的消息" time="2020-02-02 20:20" ></uni-list-chat>
				<!-- 右侧带角标 -->
				<uni-list-chat title="uni-app" avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-text="12"></uni-list-chat>
				<!-- 头像显示圆点 -->
				<uni-list-chat title="uni-app" avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" note="您收到一条新的消息" time="2020-02-02 20:20" badgePositon="right" badge-text="dot"></uni-list-chat>
				<!-- 头像显示角标 --></uni-list-chat>
				<!-- 显示多头像 -->
				<uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
				<!-- 自定义右侧内容 -->
				<uni-list-chat title="uni-app" :avatar-list="avatarList1" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot">
					<view class="chat-custom-right">
						<text class="chat-custom-text">刚刚</text>
						<!-- 需要使用 uni-icons 请自行引入 -->
						<uni-icons type="star-filled" color="#999" size="18"></uni-icons>
					</view>
				</uni-list-chat>
			</uni-list>
		</uni-list>
	</view>
		

		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				choose:true,
				avatarList: [{
								url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
							}, {
								url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
							}, {
								url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
							}],
							avatarList1: [{
											url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
										}, {
											url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
										}, {
											url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
										}, {
											url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
										}, {
											url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
										}]
			}
		},
		methods: {
			bindswitchChange(res){
				console.log(res.value);
				this.choose = res.value
			},
			bindChatChange(){
				uni.showModal({
					content:"点击了列表",
					showCancel:false
				})
			}
		}
	}
</script>

<style>

				<uni-list-chat title="uni-app" avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text
.chat-custom-right {
	flex: 1;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
}

.chat-custom-text {
	font-size: 12px;
	color: #999;
}


</style>

uni-list,uni-app

 扩展avatarList

头像组，格式为 [{url:''}]

会将你的所有突变拼接起来

例如：上面的练习

<script>
	export default {
		data() {
			return {
				choose:true,
				avatarList: [{
								url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
							}, {
								url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
							}, {
								url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
							}],
							avatarList1: [{
											url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
										}, {
											url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
										}, {
											url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
										}, {
											url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
										}, {
											url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
										}]
			}
		}
	}
</script>

小结

通过扩展插槽，可实现多种常见样式的列表

新闻列表类
  1. 云端一体混合布局：基于 uni-list 的云端一体新闻列表模板（混合布局） - DCloud 插件市场
  2. 云端一体垂直布局，大图模式：基于 uni-list 的云端一体新闻列表模板（大图模式） - DCloud 插件市场
  3. 云端一体垂直布局，多行图文混排：基于 uni-list 的云端一体新闻列表模板（图文混排） - DCloud 插件市场
  4. 云端一体垂直布局，多图模式：基于 uni-list 的云端一体新闻列表模板（多图显示） - DCloud 插件市场
  5. 云端一体水平布局，左图右文：基于 uni-list 的云端一体新闻列表模板（左图右文） - DCloud 插件市场
  6. 云端一体水平布局，左文右图：基于 uni-list 的云端一体新闻列表模板（左文右图） - DCloud 插件市场
  7. 云端一体垂直布局，无图模式，主标题+副标题：基于 uni-list 的云端一体新闻列表模板（无图显示） - DCloud 插件市场
商品列表类
  1. 云端一体列表/宫格视图互切：基于 uni-list 的云端一体商品列表模板 - DCloud 插件市场
  2. 云端一体列表（宫格模式）：基于 uni-list 的云端一体商品列表模板（宫格模式） - DCloud 插件市场
  3. 云端一体列表（列表模式）：基于 uni-list 的云端一体商品列表模板（列表模式） - DCloud 插件市场
来源：

uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/component/uniui/uni-list.html文章来源地址https://www.toymoban.com/news/detail-722345.html

到了这里，关于uniapp扩展组件---uni-list的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • uniapp仿微信朋友圈发布页(原生uni方法不使用扩展组件)

    uniapp仿微信朋友圈发布页(原生uni方法不使用扩展组件)

    常见的一些UI组件库都是只能提前选择发布图片或者发布视频，我觉得在发布前还要选择一下，挺麻烦的。虽然微信朋友圈也是这么做的吧。我希望的是，直接进入发布页，如果没有选择图片或者视频，也可以直接发布文字，选择媒体的话支持拍照、图片、视频三个选项。如

    2024年02月08日
    浏览(54)

  • uniapp之通过vue-cli命令行创建Vue3/Vite版，JavaScript开发，引入uni-ui扩展组件

    注意： Vue3/Vite版要求 node 版本^14.18.0 || =16.0.0 如果使用 HBuilderX（3.6.7以下版本）运行 Vue3/Vite 创建的最新的 cli 工程，需要在 HBuilderX 运行配置最底部设置 node路径 为自己本机高版本 node 路径（注意需要重启 HBuilderX 才可以生效） HBuilderX Mac 版本菜单栏左上角 HBuilderX-偏好设置

    2024年02月12日
    浏览(63)

  • uni-app模版（扩展插件）

    锋哥原创的uni-app视频教程： 2023版uniapp从入门到上天视频教程(Java后端无废话版)，火爆更新中..._哔哩哔哩_bilibili 2023版uniapp从入门到上天视频教程(Java后端无废话版)，火爆更新中...共计23条视频，包括：第1讲 uni-app简介、第2讲 uni-app环境搭建、第3讲 uni-app之HelloWorld实现等，

    2024年02月03日
    浏览(48)
  • uniapp系列-超详细教你在uni-app+vue3里通过web-view组件传递信息打开H5页面写入localstorage并解决兼容性

    uniapp系列-超详细教你在uni-app+vue3里通过web-view组件传递信息打开H5页面写入localstorage并解决兼容性

    web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。 点击这里直达官网文档 点击这里下载我的代码demo 本文最下面还有一些 常见或者奇怪问题解决方案 哦~ 之前开发好的H5页面，不想重新开发，想要直接放进项目用

    2024年02月09日
    浏览(59)
  • uniapp(全端兼容) - 最新详细禁用video视频组件的拖动快进快退功能，禁止视频播放组件video拖曳改变视频进度，uni-app如何不让视频播放器手动快进和快退（可保证用户完整观看完视频）

    uniapp(全端兼容) - 最新详细禁用video视频组件的拖动快进快退功能，禁止视频播放组件video拖曳改变视频进度，uni-app如何不让视频播放器手动快进和快退（可保证用户完整观看完视频）

    在uniapp小程序/h5网页网站/安卓苹果app/nvue等（全平台完美兼容）开发中，详细实现Video视频组件禁止用户快进和快退，屏蔽禁用屏幕拖拽进行快退和快进功能（禁止用户拖动视频进度条），强制让用户从0-100完整观看完视频允许中途快进，适用于uni-app官方video视频组件，也支持

    2024年04月27日
    浏览(69)
  • 【UniApp】-uni-app-网络请求

    【UniApp】-uni-app-网络请求

    经过上个章节的介绍，大家可以了解到 uni-app-pinia存储数据的基本使用方法 那本章节来给大家介绍一下 uni-app-网络请求 的基本使用方法 首先我们打开官方文档，我先带着大家看一下官方文档的介绍：https://uniapp.dcloud.net.cn/api/request/request.html 从官方文档中我们可以看到，可以

    2024年02月04日
    浏览(53)
  • 《uni-app》表单组件-Checkbox组件

    《uni-app》表单组件-Checkbox组件

    本文分享的checkbox组件为uni-app的内置组件checkbox，非扩展组件，两者在用法上其实大同小异，只是扩展组件的属性以及事件更多…没有本质上的区别～ Checkbox，复选框，图形化界面基础组件之一，常用于复选多个选项时的业务场景，如问卷调查业务场景中的多项选择题等； 基

    2024年02月03日
    浏览(57)

  • Uni-app组件使用

    组件是 视图层的基本组成单元 。是一个单独且 可复用的功能模块的封装 。 组件名称是由尖括号包裹的，可以看成一个语义化标签，是有开始标签和结束标签的。 如下举个简单的例子: uni-card  //这是开始标签 text 这是一个基础卡片示例，内容较少，此示例展示了一个没有任

    2024年02月09日
    浏览(54)

  • uni-app组件概述

    1.1、组件的含义 组件是视图层的基本组成单元。 组件是一个单独且可复用的功能模块的封装。 组件，包括：以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。 component-name 是开始标签， /component-name 是结束标签 开始标签和结束标签之间，称为组件

    2024年02月07日
    浏览(62)

  • uni-app表单组件

    common-form.vue actionList.vue comImage.vue number.vue

    2024年02月16日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包