uniapp——新闻列表（uni-list、uni-list-item）--顶部下拉刷新--上拉加载更多--顶部提示语

最新推荐文章于 2024-06-20 22:03:11 发布
最新推荐文章于 2024-06-20 22:03:11 发布
阅读量2.2w 收藏 87
点赞数 19
分类专栏： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wy313622821/article/details/110799753
版权

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:header插槽定义列表左侧的图片显示，其他内容通过List组件内置属性实现-->
			<template v-slot:header>
				<!-- 当前判断长度只为简单判断类型，实际业务中，根据逻辑直接渲染即可 -->
				<image class="image-1" :src="item.avatar" mode="aspectFill"></image>
			</template>
		</uni-list-item>
	</uni-list>

</template>

<script>
	export default {
		data() {
			return {
				info: [{
						"user_name": "未来汽车日报",
						"title": "为什么自动驾驶诉讼不断？",
						"avatar": "https://img.36krcdn.com/20200410/v2_9c3331af67e64994aa97a27fffb1a380_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
						"last_modify_date": "2020-04-11 17:11:09",
					},
					{
						"user_name": "36氪深度服务",
						"title": "2020数字中国创新大赛-数字政府赛道21强出炉，四大赛题紧贴政府数字化发展需求",
						"avatar": "https://img.36krcdn.com/20200411/v2_16417a06088947debe0450950f8fc813_img_png",
						"last_modify_date": "2020-04-11 17:03:18",
					}, {
						"user_name": "未来汽车日报",
						"title": "地方政府救市哪家强？广州补贴上万元，广深杭新增指标超5万",
						"avatar": "https://img.36krcdn.com/20200410/v2_6905947498bc4ec0af228afed409f771_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
						"last_modify_date": "2020-04-11 16:11:11",
					}
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.image-1 {
		flex-shrink: 0;
		margin-right: 10px;
		width: 125px;
		height: 75px;
		border-radius: 6px;
		overflow: hidden;
		border: 1px #f5f5f5 solid;
	}
</style>

还需要这两个文件：
在这里插入图片描述

2、文字列表模式（可添加自定义图片）

在这里插入图片描述

代码：

<template>
	<uni-list>
		<view v-for="item in info" class="view_tupian_wenzi" bindtap="click" >
			<!-- 包裹两行文字 -->
			<view class="view_wenzi2">
				<text>{{item.title}}</text>
				<text class="text_small">{{item.detail}}</text>
			</view>
		</view>
	</uni-list>


</template>

<script>
	export default {
		data() {
			return {
				info: [{
						"title": "wifi名称：FSlihua1",
						"detail": "A1:84:12:8C"
					},
					{
						"title": "wifi名称：CMCC-fslihua",
						"detail": "B1:84:12:83"
					}, {
						"title": "wifi名称：FSlihua_guest",
						"detail": "C1:84:12:8D"
					}
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
	}


	.view_tupian_wenzi {
	  height: 120rpx;
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  
	  /* 圆角 */
	  border-radius: 18rpx;
	
	  /* 边 */
	  border: 1rpx solid #E0E3DA;
	  /* 阴影 */
	  box-shadow:2rpx 6rpx 0rpx #e5e8df;
	
	  background-color: #ffffff;
	  margin: 30rpx;
	
	  /* padding使得文字和图片不至于贴着边框 */
	  padding: 25rpx;
	
	}
	
	/* 包裹两行文字 */
	
	.view_wenzi2 {
	  width: 100%;
	  margin-left: 25rpx;
	  display: flex;
	  flex-direction: column;
	}
	
	/* 小字 */
	
	.text_small {
	  font-size: 30rpx;
	  word-break: break-all;
	  color: #7a7878;
	  margin-top: 10rpx
	}
</style>

3、顶部下拉刷新

在page.json中添加：

"enablePullDownRefresh": true  //设置为true表示当前页面开启下拉刷新

在这里插入图片描述
在methods: {｝里添加

/**
			 * 下拉刷新回调函数
			 */
			onPullDownRefresh() {
				console.log("下拉刷新")
			},

4、完整的下拉刷新，上拉加载更多的联动

在这里插入图片描述

<template>
	<view>
		<!-- 顶部提示 -->
		<tui-tips ref="toast"></tui-tips>

		<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:header插槽定义列表左侧的图片显示，其他内容通过List组件内置属性实现-->
				<template v-slot:header>
					<!-- 当前判断长度只为简单判断类型，实际业务中，根据逻辑直接渲染即可 -->
					<image class="image-1" :src="item.avatar" mode="aspectFill"></image>
				</template>
			</uni-list-item>
		</uni-list>

		<!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
		<uni-load-more  :status="statusLoadMore" />

	</view>
</template>

<script>
	export default {

		data() {
			return {				
				statusLoadMore:"more",//more,loading,nomore
				info: [{
						"user_name": "未来汽车日报",
						"title": "为什么自动驾驶诉讼不断？",
						"avatar": "https://img.36krcdn.com/20200410/v2_9c3331af67e64994aa97a27fffb1a380_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
						"last_modify_date": "2020-04-11 17:11:09",
					},
					{
						"user_name": "36氪深度服务",
						"title": "2020数字中国创新大赛-数字政府赛道21强出炉，四大赛题紧贴政府数字化发展需求",
						"avatar": "https://img.36krcdn.com/20200411/v2_16417a06088947debe0450950f8fc813_img_png",
						"last_modify_date": "2020-04-11 17:03:18",
					}, {
						"user_name": "未来汽车日报",
						"title": "地方政府救市哪家强？广州补贴上万元，广深杭新增指标超5万",
						"avatar": "https://img.36krcdn.com/20200410/v2_6905947498bc4ec0af228afed409f771_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
						"last_modify_date": "2020-04-11 16:11:11",
					},
					{
						"user_name": "未来汽车日报",
						"title": "为什么自动驾驶诉讼不断？",
						"avatar": "https://img.36krcdn.com/20200410/v2_9c3331af67e64994aa97a27fffb1a380_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
						"last_modify_date": "2020-04-11 17:11:09",
					},
					{
						"user_name": "36氪深度服务",
						"title": "2020数字中国创新大赛-数字政府赛道21强出炉，四大赛题紧贴政府数字化发展需求",
						"avatar": "https://img.36krcdn.com/20200411/v2_16417a06088947debe0450950f8fc813_img_png",
						"last_modify_date": "2020-04-11 17:03:18",
					}, {
						"user_name": "未来汽车日报",
						"title": "地方政府救市哪家强？广州补贴上万元，广深杭新增指标超5万",
						"avatar": "https://img.36krcdn.com/20200410/v2_6905947498bc4ec0af228afed409f771_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
						"last_modify_date": "2020-04-11 16:11:11",
					}, {
						"user_name": "未来汽车日报",
						"title": "为什么自动驾驶诉讼不断？",
						"avatar": "https://img.36krcdn.com/20200410/v2_9c3331af67e64994aa97a27fffb1a380_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
						"last_modify_date": "2020-04-11 17:11:09",
					},
				]
			}
		},
		onLoad() {

		},
		methods: {
			/**
			 * 下拉刷新回调函数
			 */
			onPullDownRefresh() {
				console.log("下拉刷新")
				var that = this
				setTimeout(function() {
					// 顶部提示
					let options = {
						msg: "加载成功~",
						duration: 2000,
						type: "green"
					};
					that.$refs.toast.showTips(options);

					//隐藏转圈动画
					uni.stopPullDownRefresh()
				}, 2000)

			},
			/**
			 * 上拉加载更多
			 */
			onReachBottom() {
				console.log("上拉加载更多")
				// 显示加载中
				this.statusLoadMore = "loading"
				var that = this

				setTimeout(function() {	
					// 显示没有更多数据了
					that.statusLoadMore = "nomore"
				}, 2000)
			},
		}
	}
</script>

<style >
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.image-1 {
		flex-shrink: 0;
		margin-right: 10px;
		width: 125px;
		height: 75px;
		border-radius: 6px;
		overflow: hidden;
		border: 1px #f5f5f5 solid;
	}
</style>

代码下载地址为：https://download.csdn.net/download/wy313622821/13569533

wy313622821
关注
  • 19
    点赞
  • 踩
  • 87
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
UniApp实现购物与订单管理的实现
iBoy0v0的博客
07-25 1215
在UniApp中，我们可以通过使用uni-list和组件来实现商品列表。我们可以在页面的template添加到购物车在商品列表中，我们可以通过使用uni-button来添加商品到购物车。我们可以在页面的template购物车页面我们可以创建一个新的页面来展示购物车中的商品。在UniApp中，我们可以通过使用uni-list和组件来展示购物车列表。我们可以在页面的template。
uniapp组件-ui-list列表
m0_67401228的博客
03-01 5113
目录 一、基本用法 二、显示图标或图片 三、右侧显示 switch/badge 四、使用插槽 官方示例：https://ext.dcloud.net.cn/plugin?id=24 列表组件可以在其中使用图标、略缩图或放置任何你想放的元素，使用场景如：导航菜单、列表、设置中心排版等 基于uni-list的聊天列表组件：https://blog.csdn.net/qq_40323256/article/details/114298122 一、基本用法 showArrow可以有展开的箭头符号。link不仅
折叠面板+插槽：实现折叠面板右侧文字效果
2401_83014000的博客
05-13 396
折叠面板+插槽：实现折叠面板右侧文字效果
uni-app的uni-list列表组件高效使用举例 (仿知乎日报实现)
最新发布
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
06-20 1794
uni-list是Uni-App框架内置的一个列表组件，它以简洁、灵活的方式封装了列表展示逻辑，支持多种列表项布局，如文本、图标、图片等组合展示。通过uni-list，开发者可以轻松创建美观、响应式的列表界面，无需从零开始编写复杂的布局代码，大大提升了开发效率。uni-app官网uni-list 列表 - DCloud 插件市场uni-list组件的强大之处在于其高度的可定制性。除了基本的文本展示，它还支持图片、图标、开关、滑动操作等多种元素的嵌入，以及不同的布局模式（如左图右文、上下结构等）。
uniapp 利用uni-list 和 uni-load-more 组件上拉加载列表
古猿写代码
03-16 2157
最后一步，还需开启上拉加载事件。
uni-app学习笔记(一):新闻列表实战
qq_45753838的博客
10-04 1952
uni-app新闻项目实战笔记 最近在上安卓开发课程，使用的是HbuilderX进行uni-app的开发，刚刚看了腾讯课堂上的一个相关入门课程，跟着视频进行了一下项目实战，就随带记了一些笔记，方便自己以后复习。 关于接口的说明在另一篇博客中： https://blog.csdn.net/qq_45753838/article/details/108917277 新建项目news和hello。 将hello项目里的common文件夹复制到news项目中，照着hello项目里的App.vue，在ne
【z-paging下拉刷新、上拉加载】示例demo
07-26
【配置简单】仅需两步（绑定网络请求方法、绑定分页结果数组）轻松完成完整下拉刷新，上拉加载更多功能。 【低耦合，低侵入】分页自动管理。在page中无需处理任何分页相关逻辑，无需在data中定义任何分页相关变量，...
uni-app 社交 下拉加载历史消息记录，滚动到下拉之前，不闪
05-19
综上所述，实现"uni-app 社交 下拉加载历史消息记录，滚动到下拉之前，不闪"这一功能，需要结合uni-app的生命周期、数据管理、页面布局优化等多个技术点，确保在加载过程中提供平滑的用户体验。
uni-app基础.pptx
09-01
uni-app 是一个基于 Vue.js 的跨平台开发框架，它允许开发者使用一套代码库构建应用程序，这些应用程序可以部署在iOS、Android、H5以及各种小程序平台上，如微信、支付宝、百度、头条、QQ和钉钉。这极大地提高了开发...
mescroll-uni_1.3.3.zip
01-27
在uniapp项目中，我们可以通过引入Mescroll来增强应用的用户体验，尤其是对于内容丰富的列表页面，它的下拉刷新和上拉加载功能可以显著提高用户的操作效率。 集成Mescroll的第一步是下载最新的版本，这里我们使用的...
uni-template-news:基于uni-app开发的新闻资讯类App模板
05-07
uni-template-news 基于uni-app开发的新闻/资讯类App模板 体验方式 同步/下载项目后，拖入 HBuilderX 中即可运行体验。 特点 兼容多个平台 自定义组件实现顶部选项卡切换 App 平台使用 nvue 进一步优化体验 平台支持 app-vue app-nvue H5 微信小程序 支付宝小程序 百度小程序 头条小程序 注意事项 非 App-nvue 平台暂不支持下拉刷新
uniapp-仿京东商城首页、分类页实现
06-20
4. **加载更多**：为了优化用户体验，我们可以实现下拉刷新和上拉加载更多。uniapp提供了`uni-refresh`和`uni-load-more`组件来轻松实现这一功能。 在实践过程中，确保代码结构清晰、组件复用性高是关键。此外，还...
uni-app 完整一个新闻列表页开发，问题记录，总结
xu2034029667的博客
12-16 4929
要实现的几个关键点： 自动上滑加载更多，下拉刷新， 如图 原理，每页请求数据，根据下滑，当前页码加一，得到数据进行，数组拼接 原理，每页请求数据，根据下滑，当前页码加一，得到数据进行，数组拼接 原理，每页请求数据，根据下滑，当前页码加一，得到数据进行，数组拼接 注意事项： pages.js文件中，配置 { "path" : "pages/New/New"...
uniapp中列表（list）组件封装
blackhub的博客
07-10 3923
前言：在uview中没有列表相关的组件，对于有很多页面都是差不多类似于列表的，为了复用性比较高，所以自己封装了一个列表（list）组件
uni列表数据下拉刷新&上拉加载
weixin_53003063的博客
04-29 944
//下拉刷新 onPullDownRefresh() { //将页码设置为1 this.pageNum=1 //请求列表数据 this.getNew() this.getNew2() //加载完成停止刷新 uni.stopPullDownRefresh(); }, //上拉加载 onReachBottom() { //当当前列表数据长度>=数据总长度时 if (this.list.length >= this.count) { //提示.
用RecyclerView实现新闻列表页，包括头部的图片轮播，两种Item显示方式，下拉刷新和上拉加载以及限制列表的加载条目数
miyuexingchen的专栏
08-24 5938
效果图：   1、实现列表头部的图片轮播，方式：给RecyclerView添加HeaderView。     RecyclerView默认是没有添加HeaderView方法的，所以我从网上找到了一种从外部添加View的方式加以实现。     要给RecyclerView添加HeaderView，首先要准备一个View： xml version="1.0" encodi
uniapp制作app与小程序前端——list表单配置
hk_hkl的博客
05-11 1099
手把手玩转uniapp前端No.7
uniapp公共新闻模块components案例
jakelihua
11-20 1659
本文使用uniapp的公共新闻模块讲解components案例。
uni-app上拉加载下拉刷新
07-27
在uni-app中，可以通过两种方式来实现下拉刷新。第一种方式是在pages.json文件中找到当前页面的pages节点，并在style选项中开启enablePullDownRefresh，然后通过调用uni.startPullDownRefresh方法来开启下拉刷新\[1\]。第二种方式是通过在页面的methods中定义startPull方法，并在onPullDownRefresh生命周期函数中调用uni.startPullDownRefresh方法来监听下拉刷新的动作\[2\]。需要注意的是，使用onPullDownRefresh时需要在pages.json中配置使用到下拉刷新的页面，并重新运行才能起作用\[3\]。 #### 引用[.reference_title] - *1* *2* [uni-app —— 下拉刷新 & 上拉加载](https://blog.csdn.net/Bonsoir777/article/details/127934731)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [uni-app 上拉加载下拉刷新](https://blog.csdn.net/liuye066/article/details/121247483)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

wy313622821

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

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

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

打赏作者

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

抵扣说明：

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

余额充值