uniapp扩展组件---uni-list

已于 2023-07-29 15:19:19 修改
阅读量1w 收藏 27
点赞数 15
文章标签： uni-app
于 2023-07-29 15:15:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_75047254/article/details/131994919
版权

文章目录

    • 基本用法
    • 多行内容显示
    • 右侧显示角标、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>

 扩展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)icon-default.png?t=N6B9https://uniapp.dcloud.net.cn/component/uniui/uni-list.html

uniapp组件-ui-list列表
m0_67401228的博客
03-01 5484
目录 一、基本用法 二、显示图标或图片 三、右侧显示 switch/badge 四、使用插槽 官方示例：https://ext.dcloud.net.cn/plugin?id=24 列表组件可以在其中使用图标、略缩图或放置任何你想放的元素，使用场景如：导航菜单、列表、设置中心排版等 基于uni-list的聊天列表组件：https://blog.csdn.net/qq_40323256/article/details/114298122 一、基本用法 showArrow可以有展开的箭头符号。link不仅
uni-app 微信小程序 zxz-uni-data-select 下拉框选择器 多个下拉无法关闭bug
weixin_45710745的博客
01-10 952
调用 toggleSelector();调用 showSelector 属性 判断是否开启。
uni-app列表组件 list组件,简单好用通用
chenchuang0128的博客
05-28 5946
下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?-- proList: 条目数组数据 goProDetail:条目点击事件跳转（实现了点击条目数据传值）-->-- proList: 条目数组数据 goProDetail:条目点击事件跳转（实现了点击条目数据传值）-->'proName': '我是项目' + i,'proUnit': '我是详情' + i,'proType': '省级项目','area': '广州',
uniapp列表分类筛选列表数据
qq_66017988的博客
03-20 993
该功能采用uniapp，vue3的语法来设计一个报警页面数据渲染，并根据不同的分类条件展示不同的数据列表。以上就是今天要讲的内容，在实现一个数据渲染和加上条件检索数据列表的时候，首先需要清楚要以那个参数作为判断点，和将数据修改后要将数据及时显示，用的方法为set+方法名，首先要在渲染显示数据那一页声明函数，然后在修改页面中引用。
uni-app的uni-list列表组件高效使用举例 (仿知乎日报实现)
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
06-20 6773
uni-list是Uni-App框架内置的一个列表组件，它以简洁、灵活的方式封装了列表展示逻辑，支持多种列表项布局，如文本、图标、图片等组合展示。通过uni-list，开发者可以轻松创建美观、响应式的列表界面，无需从零开始编写复杂的布局代码，大大提升了开发效率。uni-app官网uni-list 列表 - DCloud 插件市场uni-list组件的强大之处在于其高度的可定制性。除了基本的文本展示，它还支持图片、图标、开关、滑动操作等多种元素的嵌入，以及不同的布局模式（如左图右文、上下结构等）。
uniapp 利用uni-list 和 uni-load-more 组件上拉加载列表
古猿写代码
03-16 4204
最后一步，还需开启上拉加载事件。
uniapp中列表（list）组件封装
blackhub的博客
07-10 4350
前言：在uview中没有列表相关的组件，对于有很多页面都是差不多类似于列表的，为了复用性比较高，所以自己封装了一个列表（list）组件
uni-app列表项实现左划操作功能
02-25
在上述代码中，`uni-list-item`是列表项，`uni-swipe-cell`是滑动单元，它包裹了`left`和`content`两个插槽。`left`插槽用于放置左滑显示的操作按钮，`content`插槽则用于显示列表项的主要内容。 接下来，我们需要...
uni-app探索：从开发到扩展
2301_77533793的博客
04-24 1006
随着移动互联网的蓬勃发展，跨平台开发框架成为了开发者的热门选择。uni-app作为其中的佼佼者，凭借其一次编写、多端运行的特性，迅速在开发社区中赢得了广泛好评。uni-app使用Vue.js开发所有前端应用，不仅能发布到iOS、Android、H5等多个平台，还能兼容各种小程序（微信/支付宝/百度等）。这种强大的跨平台能力，使得开发者能够更高效地构建应用，减少重复劳动，提升开发效率。
自学uni-app （5）扩展组件、组件插槽、uni生命周期
Slow down your pace
08-10 1232
uni-app可用于跨平台，支持app平台、h5平台、小程序平台 一次编写，多平台生成
uniapp-菜单组件
04-11
uni-app 菜单组件，flex布局 <!-- author hzj email hzj_51it@aliyun.com wechat XHKJ_IT 菜单组件 v0.01 参数： 属性 类型 说明 top Number 菜单项距离顶部的位置 menuList Array 菜单具体项：url 需要跳转的地址，icon：图标，txt：文字内容，type ：跳转方式==navigate，redirect，reLaunch，switchTab，navigateBack
uniapp-组件规范
if.else.Z
03-23 2627
easycom、uni_module、datacom、原生组件、uniCloud组件 easycom： 只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。 不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好 easycom是自动开启的，不需要手动开启 在组件名完全一致的情况下，easycom引入的优
uni-app自定义列表组件
仗剑天涯，从摘要开始
01-31 3821
filename: u-list.vue <template> <view class="u-list-item u-f-ac u-f-jsb" hover-class="list-hover" @tap="clickevent" :class="{ 'u-list-item-first': isFirstChild }"> <view class="u-f-a...
uniapp——新闻列表（uni-list、uni-list-item）--顶部下拉刷新--上拉加载更多--顶部提示语
热门推荐
wy313622821的博客
12-07 2万+
1、新闻列表模式 效果图： 代码 <template> <uni-list> <!-- title、note设置标题和小文字 --> <uni-list-item direction="row" v-for="item in info" :key="item.id" :title="item.title" :note="item.user_name + ' '+item.last_modify_date"> <!-- 通过v-slot:
Uni-app之微信小程序list组件
Jocelyn_书
09-04 4193
描述：这是一个在uni-app中list列表组件，上拉加载更多 参考：uni-app的小程序HelloUni的模板——》的列表详情示例 将HelloUni模板中的-——》components下的uni-load-more文件夹复制到你自己文件的components下 在需要使用list组件的地方引入load-more import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'; 并且在components中正确
uniapp 使用组件-uni-list聊天列表
weixin_46324536的博客
11-17 3797
uniapp 使用组件-uni-list聊天列表
uni-app list 2列_万能前端框架uni app初探03：底部导航开发
weixin_39922749的博客
11-21 467
前言本节我们使用uni app的底部导航功能，点击不同tab会显示不同页面，这个功能在实际项目开发中几乎是必备的。一、基础知识1.tabBar如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。Tips当设置 position 为 top 时，将不会显示 icontabBar 中的 list 是一个数组，只能配置最少2个、最多5个...
基于Vue uni-app的自定义列表表格信息展示组件
chenchuang0128的博客
05-28 1915
随着软件技术的不断发展，前端开发面临着越来越多的挑战。特别是在业务场景复杂多变的情况下，如何提高开发效率和降低维护成本成为了关键。本文旨在探讨组件化开发在前端应用中的重要性，并以Vue uni-app自定义列表表格为例，介绍如何实施组件化开发，从而优化开发过程，提升产品质量。一、引言随着前端应用规模的不断扩大，开发复杂度也在逐渐提高。传统的整体式开发方式往往导致代码耦合度高，任何小的改动都可能引起整体逻辑的变动，这无疑增加了开发和维护的难度。因此，组件化开发成为了一种有效的解决方案。
uniapp uni-file-picker图片上传
最新发布
04-11
<think>嗯，用户想在UniApp中使用uni-file-picker实现图片上传的功能，需要一份使用指南和示例代码。首先，我得回忆一下uni-file-picker组件的相关文档。记得这个组件是官方封装好的，底层用了uni.chooseImage、uni.previewImage和uni.uploadFile这几个API。用户可能对这些底层API不太熟悉，所以直接使用uni-file-picker会更方便。 接下来，我需要确保回答的结构清晰，分步骤说明。首先应该介绍基本用法，包括如何引入组件、配置相关属性，比如file-extname来限制文件类型，mode设置上传模式（列表或网格）。然后提供一个简单的示例代码，展示模板部分和数据方法部分，特别是@success事件的处理，这里可能需要说明如何获取上传后的文件信息。 然后，用户可能需要上传到自己的服务器，而不仅仅是uniCloud。这时候要提到修改upload-url属性，并处理before-upload事件，可能涉及添加请求头如token。同时要注意跨域问题，需要服务器支持CORS。这部分可能需要示例代码，展示如何配置before-upload来添加自定义参数。 另外，引用中提到的注意事项也很重要，比如安卓的视频大小限制、临时路径持久化需要调用uni.saveFile，以及权限检查。这些应该在注意事项部分逐一列出，帮助用户避免常见问题。比如，提醒用户检查相册和摄像头权限，使用uni.authorize或uni.getSetting来处理权限问题。 还有，用户可能想知道上传后的文件如何处理，比如持久化保存或者上传到CDN。这时候需要提到uni.saveFile和uniCloud.uploadFile，特别是推荐使用uniCloud的优势，比如免费CDN和易用性。可能还需要提到uni-file-picker已经集成上传到uniCloud的功能，方便用户直接使用。 需要检查是否覆盖了用户可能遇到的问题，比如文件类型限制、上传数量、自定义样式等。如果有高级用法，比如自定义样式，可以简要说明如何通过slot扩展，但可能不需要深入，除非用户明确要求。 最后，相关问题部分要生成与uni-file-picker相关的问题，比如优化上传、处理大文件、权限问题、与uniCloud的整合，以及自定义样式。这些问题应该覆盖用户可能进一步探索的方向，帮助他们深入使用组件。 需要确保所有提到的API和属性名称正确，比如file-extname是否正确，事件名称如@success和before-upload是否正确拼写。同时，代码示例中的标签是否正确，比如<uni-file-picker>的属性是否正确使用。还要注意引用对应的参考文献，比如引用[1]、[2]、[3]中的内容，确保信息准确。 可能还需要提醒用户注意版本兼容性，确保他们使用的UniApp和uni-ui版本支持这些功能。如果有常见的错误，比如图片上传失败，可以建议检查网络、服务器配置或权限问题。但用户的问题主要集中在使用指南上，所以可能不需要深入调试部分，除非用户后续提问。 总之，回答需要步骤明确，代码示例简洁，注意事项全面，并且引用相关文档，确保用户能够顺利实现图片上传功能，同时了解可能遇到的坑和解决方法。</think>### UniApp uni-file-picker 图片上传使用指南 #### 一、基本用法 1. **组件引入** 确保已安装并注册`uni-file-picker`组件（需通过HBuilderX导入`uni-ui`扩展库）。 2. **属性配置** - `file-extname`：指定允许上传的图片类型，如`file-extname="jpg,png"` - `mode`：设置显示模式（`list`列表模式或`grid`网格模式） - `limit`：限制最大上传数量 3. **示例代码** ```html <uni-file-picker v-model="fileList" mode="grid" file-extname="jpg,png" :limit="5" @success="uploadSuccess" @fail="uploadFail" ></uni-file-picker> ``` ```javascript export default { data() { return { fileList: [] } }, methods: { uploadSuccess(e) { console.log('上传成功:', e.tempFilePaths); // 上传到服务器的逻辑可在此处补充 }, uploadFail(err) { console.error('上传失败:', err); } } } ``` #### 二、上传到自定义服务器 1. **配置上传地址** 设置`upload-url`属性指向服务器接口： ```html <uni-file-picker upload-url="https://your-api.com/upload" @before-upload="beforeUpload" ></uni-file-picker> ``` 2. **添加请求头** 通过`before-upload`事件添加认证信息： ```javascript methods: { beforeUpload(files) { return new Promise((resolve) => { files.header = { 'Authorization': 'Bearer token' }; resolve(files); }); } } ``` *注意：需确保服务器配置了CORS跨域支持[^3]* #### 三、注意事项 1. **临时路径处理** App端获取的临时路径需调用`uni.saveFile`持久化存储[^2] 2. **文件大小限制** Android视频上传默认限制180MB，大文件需使用原生插件[^2] 3. **权限检查** 使用前应检查相册/摄像头权限： ```javascript uni.getSetting({ success(res) { if (!res.authSetting['scope.album']) { uni.authorize({ scope: 'scope.album' }) } } }) ``` #### 四、完整流程示例 ```html <template> <view> <uni-file-picker v-model="files" mode="list" :auto-upload="false" @select="handleSelect" ></uni-file-picker> <button @click="submit">提交到服务器</button> </view> </template> <script> export default { data() { return { files: [] } }, methods: { handleSelect(files) { this.tempFiles = files.tempFiles }, async submit() { const uploadTasks = this.tempFiles.map(file => uni.uploadFile({ url: 'your-api-url', filePath: file.path, name: 'file' }) ); await Promise.all(uploadTasks); uni.showToast({ title: '全部上传成功' }); } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

荣在心中度

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值