uni-app微信小程序分页上拉加载更多的实现

最新推荐文章于 2024-06-26 14:56:44 发布
最新推荐文章于 2024-06-26 14:56:44 发布
阅读量3.8k 收藏 11
点赞数 1
分类专栏： uni-a 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45442630/article/details/106694848
版权

首先我们需要下载一个uni-app的加载更多的插件 uniLoadMore
插件内容如下:
新建一个文件命名为：uni-load-more
大家可以像我一样放在这里在这里插入图片描述
插件的内容如下:

<template>
	<view class="uni-load-more" @click="onClick">
		<!-- #ifdef APP-NVUE -->
		<loading-indicator v-if="!webviewHide && status === 'loading' && showIcon" :style="{color: color,width:iconSize+'px',height:iconSize+'px'}" :animating="true" class="uni-load-more__img uni-load-more__img--nvue"></loading-indicator>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<svg width="24" height="24" viewBox="25 25 50 50" v-if="!webviewHide && (iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon"
		:style="{width:iconSize+'px',height:iconSize+'px'}" class="uni-load-more__img uni-load-more__img--android-H5">
			<circle cx="50" cy="50" r="20" fill="none" :style="{color:color}" :stroke-width="3"></circle>
		</svg>
		<!-- #endif -->
		<!-- #ifndef APP-NVUE || H5 -->
		<view v-if="!webviewHide && (iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon"
		:style="{width:iconSize+'px',height:iconSize+'px'}" class="uni-load-more__img uni-load-more__img--android-MP">
			<view :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
			<view :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
			<view :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
		</view>
		<!-- #endif -->
		<!-- #ifndef APP-NVUE -->
		<view v-else-if="!webviewHide && status === 'loading' && showIcon" :style="{width:iconSize+'px',height:iconSize+'px'}" class="uni-load-more__img uni-load-more__img--ios-H5">
			<image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzlBMzU3OTlEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzlBMzU3OUFEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDOUEzNTc5N0Q5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDOUEzNTc5OEQ5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt+ALSwAAA6CSURBVHja1FsLkFZV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"
						 mode="widthFix"></image>
		</view>
		<!-- #endif -->
		<text class="uni-load-more__text" :style="{color: color}">{{ status === 'more' ? contentText.contentdown : status === 'loading' ? contentText.contentrefresh : contentText.contentnomore }}</text>
	</view>
</template>

<script>
	const platform = uni.getSystemInfoSync().platform

	/**
	 * LoadMore 加载更多
	 * @description 用于列表中，做滚动加载使用，展示 loading 的各种状态
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=29
	 * @property {String} status = [more|loading|noMore] loading 的状态
	 * 	@value more loading前
	 * 	@value loading loading中
	 * 	@value noMore 没有更多了
	 * @property {Number} iconSize 指定图标大小
	 * @property {Boolean} iconSize = [true|false] 是否显示 loading 图标
	 * @property {String} iconType = [snow|circle|auto] 指定图标样式
	 * 	@value snow ios雪花加载样式
	 * 	@value circle 安卓唤醒加载样式
	 * 	@value auto 根据平台自动选择加载样式
	 * @property {String} color 图标和文字颜色
	 * @property {Object} contentText 各状态文字说明，值为：{contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}
	 * @event {Function} clickLoadMore 点击加载更多时触发
	 */
	export default {
		name: 'UniLoadMore',
		props: {
			status: {
				// 上拉的状态：more-loading前；loading-loading中；noMore-没有更多了
				type: String,
				default: 'more'
			},
			showIcon: {
				type: Boolean,
				default: true
			},
			iconType: {
				type: String,
				default: 'auto'
			},
			iconSize: {
				type: Number,
				default: 24
			},
			color: {
				type: String,
				default: '#777777'
			},
			contentText: {
				type: Object,
				default () {
					return {
						contentdown: '上拉显示更多',
						contentrefresh: '正在加载...',
						contentnomore: '没有更多数据了'
					}
				}
			}
		},
		data() {
			return {
                webviewHide: false,
				platform: platform
			}
		},
		// #ifndef APP-NVUE
		computed:{
			iconSnowWidth(){
				console.log((Math.floor(this.iconSize/24)||1)*2);
				return (Math.floor(this.iconSize/24)||1)*2
			}
		},
		// #endif
		mounted() {
			// #ifdef APP-PLUS
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			var currentWebview = page.$getAppWebview();
			currentWebview.addEventListener('hide', () => {
				this.webviewHide = true
			})
			currentWebview.addEventListener('show', () => {
				this.webviewHide = false
			})
			// #endif
		},
		methods: {
			onClick() {
				this.$emit('clickLoadMore', {
					detail: {
						status: this.status,
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/uni.scss';

	.uni-load-more {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		height: 40px;
		align-items: center;
		justify-content: center;
	}

	.uni-load-more__text {
		font-size: 15px;
	}

	.uni-load-more__img {
		width: 24px;
		height: 24px;
		margin-right: 8px;
	}

	.uni-load-more__img--nvue {
		color: #666666;
	}

	.uni-load-more__img--android,
	.uni-load-more__img--ios {
		width: 24px;
		height: 24px;
		transform: rotate(0deg);
	}

	/* #ifndef APP-NVUE */
	.uni-load-more__img--android {
		animation: loading-ios 1s 0s linear infinite;
	}

	@keyframes loading-android {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.uni-load-more__img--ios-H5 {
		position: relative;
		animation: loading-ios-H5 1s 0s step-end infinite;
	}

	.uni-load-more__img--ios-H5>image {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}

	@keyframes loading-ios-H5 {
		0% {
			transform: rotate(0deg);
		}

		8% {
			transform: rotate(30deg);
		}

		16% {
			transform: rotate(60deg);
		}

		24% {
			transform: rotate(90deg);
		}

		32% {
			transform: rotate(120deg);
		}

		40% {
			transform: rotate(150deg);
		}

		48% {
			transform: rotate(180deg);
		}

		56% {
			transform: rotate(210deg);
		}

		64% {
			transform: rotate(240deg);
		}

		73% {
			transform: rotate(270deg);
		}

		82% {
			transform: rotate(300deg);
		}

		91% {
			transform: rotate(330deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	/* #endif */

	/* #ifdef H5 */
	.uni-load-more__img--android-H5 {
		animation: loading-android-H5-rotate 2s linear infinite;
		transform-origin: center center;
	}

	.uni-load-more__img--android-H5>circle {
		display: inline-block;
		animation: loading-android-H5-dash 1.5s ease-in-out infinite;
		stroke: currentColor;
		stroke-linecap: round;
	}

	@keyframes loading-android-H5-rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes loading-android-H5-dash {
		0% {
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
		}

		50% {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -40;
		}

		100% {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -120;
		}
	}

	/* #endif */

	/* #ifndef APP-NVUE || H5 */
	.uni-load-more__img--android-MP {
		position: relative;
		width: 24px;
		height: 24px;
		transform: rotate(0deg);
		animation: loading-ios 1s 0s ease infinite;
	}

	.uni-load-more__img--android-MP>view {
		position: absolute;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: solid 2px transparent;
		border-top: solid 2px #777777;
		transform-origin: center;
	}

	.uni-load-more__img--android-MP>view:nth-child(1){
		animation: loading-android-MP-1 1s 0s linear infinite;
	}

	.uni-load-more__img--android-MP>view:nth-child(2){
		animation: loading-android-MP-2 1s 0s linear infinite;
	}

	.uni-load-more__img--android-MP>view:nth-child(3){
		animation: loading-android-MP-3 1s 0s linear infinite;
	}

	@keyframes loading-android {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes loading-android-MP-1{
		0%{
			transform: rotate(0deg);
		}
		50%{
			transform: rotate(90deg);
		}
		100%{
			transform: rotate(360deg);
		}
	}
	@keyframes loading-android-MP-2{
		0%{
			transform: rotate(0deg);
		}
		50%{
			transform: rotate(180deg);
		}
		100%{
			transform: rotate(360deg);
		}
	}
	@keyframes loading-android-MP-3{
		0%{
			transform: rotate(0deg);
		}
		50%{
			transform: rotate(270deg);
		}
		100%{
			transform: rotate(360deg);
		}
	}
	/* #endif */
</style>

接下来我们可以直接在我们的项目中引入

import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue'

注册组件：

components: {
			uniLoadMore
		},

接下来我们直接在文中引用：

<uni-load-more :status="status" :content-text="contentText" />

然后在data中定义初始页码和一个空的数组，还有contentText:

data(){
return{
contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '',
					contentnomore: '没有更多'
				},
				page:1,
				isEnd:false, //isEnd用于判断是否还有数据，没有数组停止数组请求
				newArrData:[]
}
}

调用uni-app的onReachBottom函数：

onReachBottom() {
			this.status = 'more'; //设置sataus是更多
			this.getFunction(); //加载的数据
		},
	methods:{
	getFunction(){
	if(this.isEnd){
	     return
     }
     uni.request({}).then(res =>){
     newArrData=res.data;
     this.list=this.list.concat(newArrData); //在页面中我们循环list数组就可以了
     if(res.data.length<=0){
     this.isEnd=true;
     this.status="noMore";
  }else{
  this.page++
   } 
      }
      }
	}

上面那种方法适用于只有一个分页数据，当我们牵扯到tab切换进行分页的时候，我们需要对页码进行处理，保证我们每次切换tab栏时，页码都是从1开始的。
可以在tab栏切换的时候进行判断：
在data中定义一个数据currentTab用于存放当前的tab栏的index

clickTab(data){
//如果当前点击的不变，则不重置page
if (this.currentTab === data.detail.index) {
		return
		}
		this.currentTab=data.detail.index; 
		this.page=1;
		this.getFunction(参数);
}

这种方法在页面加载的时候我们只能加载默认的tab栏数据，但是如果我们感觉点击切换tab栏数据加载太慢的话，可以把tab栏的方法分开写，定义多个this.getFunction(),这样就跟第一种情况一样了，在页面加载的时候也可以把所有的tab栏数据都加载出来，在页面向上滑动时在加载数据。当这多个方法在页面中，如果我们不想分开写多个数组渲染，也可以用同一个数组渲染。写一个监听器，监听currentTab的变化
例如:

watch: {
			currentTab: {
				immediate: true,
				deep: true,
				handler(newVal, oldVal) {
					if (newVal === 1) {
						this.netMeetingDataLength = this.netMeetingDataLength2;
					} else if (newVal === 0) {
						this.netMeetingDataLength = this.netMeetingDataLength3;
					} else if (newVal === 2) {
						this.netMeetingDataLength = this.netMeetingDataLength1;
					}
				}
			}
		},

在每次点击切换时把其他tab栏对应的值赋值给netMeetingDataLength数组，然后在页面中循环netMeetingDataLength数组就可以了

小趴菜呢
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
uniapp新闻列表-上拉刷新-下拉加载更多.zip
12-08
1、使用uniapp编写。 2、新闻列表。 3、上拉刷新。 4、下拉加载更多。 5、图片在左，文字在右。
uni-app小程序简单聊天.rar
12-15
uni-app是一个使用Vue.js开发所有前端应用的框架，它支持多端输出，包括微信小程序、支付宝小程序、百度智能小程序、QQ小程序、H5以及App等。这个压缩包中的内容主要是为了帮助开发者快速理解和实现一个基础的聊天...
uni-app（微信小程序）下拉刷新 上拉加载
qq_58438037的博客
10-01 430
uni-app（微信小程序）下拉刷新 上拉加载
uniapp下拉加载更多
最新发布
zzuli111的博客
06-26 151
【代码】uniapp下拉加载更多。
uni-app下拉刷新、上拉加载更多实现
热门推荐
龙衣
07-17 2万+
下拉刷新 下拉刷新文档 在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh:true。 当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷...
uniapp中uni-load-more的使用
第⑦个前端
08-25 9183
1 引入uniloadmore import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'; 2 data中写的内容 reload: false, status: 'more', contentText: { contentdown: '上拉加载更多~', contentrefresh: '加载中', contentnomore: '我是有底线的~' }, 3 template里面写的内容 <uni-l
uniapp上拉加载 加载更多 uni-load-more组件使用
Champagne_7的博客
09-01 5431
uni-app 上拉加载 使用uni-ui 的 LoadMore 组件_uni-load-more 上拉没反应_O3ohn的博客-CSDN博客。上拉加载的时候 如果没有更多则不加载数据 否则 page ++ 然后获取第二页的数据。判断数据的长度是否小于 我们需要的长度 如果小于 那就是没有更多数据。1、给渲染的数据加上滚动加载 和 uni-load-more 组件。4、接收数据 如果页码为1 则直接赋值 否则 加上之前的数据。原创链接 在基础上做修改。3、加上下拉刷新和上拉加载。
uni-app案例 仿微信页面（无响应）
06-16
在移动应用开发领域，uni-app是一个备受开发者欢迎的跨平台框架，它允许开发者使用一套代码库来构建iOS、Android、H5、小程序等多个平台的应用。本案例将探讨如何使用uni-app来模仿微信的页面设计，但描述中提到的...
微信小程序上滑加载下拉刷新（onscrollLower）分批加载数据（一）
01-03
微信小程序上滑加载下拉刷新（onscrollLower）分批加载数据（一） 页面缓存的设置优化了页面加载，减少了频繁的调取接口，使用户在断网的情况下有更好的体验。 每个微信小程序都可以有自己的本地缓存，可以通过 wx....
uni-app框架的vue语法实现一个精美图片微信小程序应用
06-26
课程中包含大量目前前端必备的技能，如vue，微信小程序，组件封装，移动端手势封装，数据分页，axios，moment，flex布局，sass，视频播放，视频下载等等功能。
Uni-APP微商淘宝客小程序源码
05-28
Uni-APP微商淘宝客小程序源码，这款小程序源码非常适合做微商淘宝客，uniapp框架开发的，主要功能就是分享推荐商品的说明介绍和照片，最后给出淘宝客的购买链接，别人通过你的链接购买就有分成。 功能特点介绍 1、...
微信小程序，两种方式实现上拉加载，下拉刷新
12-19
微信小程序，两种方式实现上拉加载，下拉刷新，用于列表展示数据
uni-app上拉页面加载数据，实现分页效果
逍遥的博客
04-02 4081
实现分页效果是为了在上拉数据的时候逐渐加载下一页面的数据，这样就不会造成数据加载太多造成的页面显示过慢的问题，可以在一定成的上优化界面。 首先要先定义数据和在上拉函数中调用this，代码如下： var _self, page = 1; 然后也要在数据data中加入所要提示页面的消息，代码如下： loadingType: 0, contentText: { contentdow...
uniapp组价-uni-load-more加载更多
03-02 8714
官方示例：https://ext.dcloud.net.cn/plugin?id=29 一、基本状态 <template> <view> <uni-load-more status="more" /> <uni-load-more status="loading" /> <uni-load-more status="noMore" /> </view> </template> 二、图标类型
微信小程序_uni-app_分页组件_scroll-view
王大锤的博客
05-19 1298
写在前边：《微信小程序_···》系列的博文，是学习了b站《前端开发利器vue，微信小程序快速开发实战，黑马程序员前端web教程》BY黑马程序员之后，的学习笔记，这是视频地址：https://www.bilibili.com/video/BV1Sc41187nZ?p=1，该视频是讲了一个基于uni-app的项目 1 分页组件_scroll-view_ _简介 使用scroll-view标签充当容器，滚动条触底事件：scrolltolower 触底时，判断有无下一页，如果有，请求下一页，将新数据拼接到原数.
uniapp微信小程序uni-load-more上拉加载更多数据
anfuren的博客
01-05 5118
1.引入uni-app中uni-load-more.vue到自己的项目 import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'; 2.data 中定义 reload: false, status: 'more', contentText: { contentdown: '上拉加载更多~', contentrefresh: '加载中', contentnomore: '我是有底线的~' }, 3.在需要加载的
uniapp 云开发微信小程序分页加载数据
weixin_38946164的博客
02-20 759
uniapp 云开发微信小程序分页加载数据
uniapp 利用uni-list 和 uni-load-more 组件上拉加载列表
古猿写代码
03-16 2221
最后一步，还需开启上拉加载事件。
uniapp实现分页效果
qq_46100517的博客
05-06 2145
呃~丑陋了一点0.0一、代码二、效果图 一、代码 <template> <view> <view class="xg"> <view :class="{'active':isActive==1}" @click="chenked(1)">One</view> <view :class="{'active':isActive==2}" @click="chenked(2)">Two</view> &lt
uni-app微信小程序登录授权的实现
03-30
uni-app微信小程序登录授权的实现如下： 1. 在app.vue文件中引入微信登录插件wxLogin。 ```javascript import wxLogin from '@/components/wx-login/wx-login.vue'; export default { components: { wxLogin } ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值