关于uniapp的下拉刷新，上拉加载的使用

最新推荐文章于 2025-09-20 11:05:27 发布
原创 最新推荐文章于 2025-09-20 11:05:27 发布 · 1.6k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js

uniapp

  1. 是基于vue生态的，兼容多端的解决方案的一个框架。
  2. 其编码风格和原生的信微信小程序有极为相似。
    uniapp可以轻松实现下拉刷新和上拉加载的效果，在实际应用中，对于我们对列表的分页处理，很友好。

前期准备

1.因为我们要做这个效果需要后端的接口分页支持，所以我们需要模拟数据（mock）

创建文件夹api，api文件夹中创建mock.js。

export function apiGoods(pageNum, pageSize, isGoodsEdit) {
	console.log('参数------>',pageNum, pageSize, isGoodsEdit)
	return new Promise((resolute, reject)=>{
		//延时一秒,模拟数据联网延时
		setTimeout(()=> {
			try{
				let data = isGoodsEdit ? goodsEdit : goods;
				//模拟分页数据
				let list=[];
				for (let i = (pageNum-1)*pageSize; i < pageNum*pageSize; i++) {
					if(i==data.length) break;
					list.push(data[i]);
				}
				//模拟接口请求成功
				console.log("page.num=" + pageNum + ", page.size=" + pageSize + ", curPageData.length=" + list.length);
				resolute(list);
			} catch (e) {
				//模拟接口请求失败
				reject(e);
			}
		},1000)
	})
}

api文件中创建文件goods.js

export default [{
	"id": "1",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd1.jpg",
	"goodName": "【1】  六罐装荷兰美素佳儿金装2段900g",
	"goodPrice": 1149.00,
	"goodSold": 648
}, {
	"id": "2",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd2.jpg",
	"goodName": "【2】  韩国Amore爱茉莉红吕洗发水套装修复受损发质",
	"goodPrice": 89.00,
	"goodSold": 128
}, {
	"id": "3",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd3.jpg",
	"goodName": "【3】  Friso美素佳儿 金装婴儿配方奶粉3段900g",
	"goodPrice": 195.00,
	"goodSold": 968
}, {
	"id": "4",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd4.jpg",
	"goodName": "【4】  Fisher goodPrice费雪 费雪三轮儿童滑行车",
	"goodPrice": 299.00,
	"goodSold": 85
}, {
	"id": "5",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd5.jpg",
	"goodName": "【5】  Babylee巴布力 实木婴儿床 雷卡拉130*70cm",
	"goodPrice": 1889.00,
	"goodSold": 18
}, {
	"id": "6",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd6.jpg",
	"goodName": "【6】  Pigeon贝亲 独立三层奶粉盒 送小罐奶粉1段200g",
	"goodPrice": 70.00,
	"goodSold": 658
}, {
	"id": "7",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd7.jpg",
	"goodName": "【7】 TTBOO兔兔小布 肩纽扣套装",
	"goodPrice": 268.00,
	"goodSold": 128
}, {
	"id": "8",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd8.jpg",
	"goodName": "【8】  Nuna璐拉 婴儿布里奇果精纯嫩肤沐浴露婴儿精纯芦荟胶",
	"goodPrice": 140.00,
	"goodSold": 366
}, {
	"id": "9",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd9.jpg",
	"goodName": "【9】  illuma启赋 奶粉3段900g",
	"goodPrice": 252.00,
	"goodSold": 98
}, {
	"id": "10",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd10.jpg",
	"goodName": "【10】  Abbott雅培乳蛋白部分水解婴儿配方奶粉3段820g",
	"goodPrice": 89.00,
	"goodSold": 128
}, {
	"id": "11",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd11.jpg",
	"goodName": "【11】  韩蜜 酷炫唇蜜（礼盒套装）2.8g*4",
	"goodPrice": 179.00,
	"goodSold": 35
}, {
	"id": "12",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd12.jpg",
	"goodName": "【12】  保税区直发【3包装】日本Merries花王纸尿裤NB90",
	"goodPrice": 289.00,
	"goodSold": 1928
}, {
	"id": "13",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd13.jpg",
	"goodName": "【13】  Comotomo可么多么 硅胶奶瓶（0-3月奶嘴）150ml绿色",
	"goodPrice": 203.00,
	"goodSold": 87
}, {
	"id": "14",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd14.jpg",
	"goodName": "【14】  香港直邮德国瑞德露Rival de Loop芦荟精华安瓶",
	"goodPrice": 152.00,
	"goodSold": 61
}, {
	"id": "15",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd15.jpg",
	"goodName": "【15】  保税区直发药师堂尊马油香草味温和保湿无刺激面霜",
	"goodPrice": 269.00,
	"goodSold": 73
}, {
	"id": "16",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd16.jpg",
	"goodName": "【16】  香港直邮日本Spatreatment眼膜保湿去细纹法令纹",
	"goodPrice": 219.00,
	"goodSold": 13
}, {
	"id": "17",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd17.jpg",
	"goodName": "【17】  韩国MEDIHEALNMF可莱丝针剂睡眠面膜",
	"goodPrice": 81.00,
	"goodSold": 128
}, {
	"id": "18",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd18.jpg",
	"goodName": "【18】  DHC蝶翠诗橄榄蜂蜜滋养洗脸手工皂90g",
	"goodPrice": 123.00,
	"goodSold": 77
}, {
	"id": "19",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd19.jpg",
	"goodName": "【19】  日本资生堂CPB肌肤之钥新版隔离霜 清爽型 30ml",
	"goodPrice": 429.00,
	"goodSold": 36
}, {
	"id": "20",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd20.jpg",
	"goodName": "【20】 Heinz亨氏 婴儿面条优加面条全素套餐组合3口味3盒",
	"goodPrice": 39.00,
	"goodSold": 61
}, {
	"id": "21",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd21.jpg",
	"goodName": "【21】  Heinz亨氏 乐维滋果汁泥组合5口味15袋",
	"goodPrice": 69.00,
	"goodSold": 55
}, {
	"id": "22",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd22.jpg",
	"goodName": "【22】  保税区直发澳大利亚Swisse高浓度蔓越莓胶囊30粒",
	"goodPrice": 271.00,
	"goodSold": 19
}, {
	"id": "23",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd23.jpg",
	"goodName": "【23】  挪威Nordic Naturals小鱼婴幼儿鱼油DHA滴剂",
	"goodPrice": 102.00,
	"goodSold": 125
}, {
	"id": "24",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd24.jpg",
	"goodName": "【24】  澳大利亚Bio island DHA for Pregnancy海藻油DHA",
	"goodPrice": 289.00,
	"goodSold": 28
}, {
	"id": "25",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd25.jpg",
	"goodName": "【25】  澳大利亚Fatblaster Coconut Detox椰子水",
	"goodPrice": 152.00,
	"goodSold": 17
}, {
	"id": "26",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd26.jpg",
	"goodName": "【26】  Suitsky舒比奇 高护极薄舒爽纸尿片尿不湿XL60",
	"goodPrice": 99.00,
	"goodSold": 181
}, {
	"id": "27",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd27.jpg",
	"goodName": "【27】  英国JUST SOAP手工皂 玫瑰天竺葵蛋糕皂",
	"goodPrice": 72.00,
	"goodSold": 66
}, {
	"id": "28",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd28.jpg",
	"goodName": "【28】  德国NUK 多色婴幼儿带盖学饮杯",
	"goodPrice": 92.00,
	"goodSold": 138
}]

为了模拟下拉刷新，我们还需要准备另一个mock的数据，所以还需要在api中创建文件goods-edit.js

export default [{
	"id": "3",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd3.jpg",
	"goodName": "【3】 美素佳儿Friso婴儿配方奶粉3段 ( 商品【1】【2】 已删除 )",
	"goodPrice": 195.00,
	"goodSold": 968
}, {
	"id": "4",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd4.jpg",
	"goodName": "【4】  Fisher goodPrice费雪 费雪三轮儿童滑行车",
	"goodPrice": 298.00,
	"goodSold": 65
}, {
	"id": "5",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd5.jpg",
	"goodName": "【5】  Babylee巴布力 实木婴儿床 雷卡拉130*70cm",
	"goodPrice": 1789.00,
	"goodSold": 20
}, {
	"id": "6",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd6.jpg",
	"goodName": "【6】  Pigeon贝亲 独立三层奶粉盒 送小罐奶粉1段200g",
	"goodPrice": 70.00,
	"goodSold": 658
}, {
	"id": "7",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd7.jpg",
	"goodName": "【7】 TTBOO兔兔小布 肩纽扣套装",
	"goodPrice": 268.00,
	"goodSold": 128
}, {
	"id": "8",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd8.jpg",
	"goodName": "【8】  Nuna璐拉 婴儿布里奇果精纯嫩肤沐浴露婴儿精纯芦荟胶",
	"goodPrice": 140.00,
	"goodSold": 366
}, {
	"id": "9",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd9.jpg",
	"goodName": "【9】  illuma启赋 奶粉3段900g",
	"goodPrice": 252.00,
	"goodSold": 98
}, {
	"id": "10",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd10.jpg",
	"goodName": "【10】  Abbott雅培乳蛋白部分水解婴儿配方奶粉3段820g",
	"goodPrice": 89.00,
	"goodSold": 128
}, {
	"id": "11",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd11.jpg",
	"goodName": "【11】  韩蜜 酷炫唇蜜（礼盒套装）2.8g*4",
	"goodPrice": 179.00,
	"goodSold": 35
}, {
	"id": "12",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd12.jpg",
	"goodName": "【12】  保税区直发【3包装】日本Merries花王纸尿裤NB90",
	"goodPrice": 289.00,
	"goodSold": 1928
}, {
	"id": "13",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd13.jpg",
	"goodName": "【13】  Comotomo可么多么 硅胶奶瓶（0-3月奶嘴）150ml绿色",
	"goodPrice": 203.00,
	"goodSold": 87
}, {
	"id": "14",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd14.jpg",
	"goodName": "【14】  香港直邮德国瑞德露Rival de Loop芦荟精华安瓶",
	"goodPrice": 152.00,
	"goodSold": 61
}, {
	"id": "15",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd15.jpg",
	"goodName": "【15】  保税区直发药师堂尊马油香草味温和保湿无刺激面霜",
	"goodPrice": 269.00,
	"goodSold": 73
}, {
	"id": "16",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd16.jpg",
	"goodName": "【16】  香港直邮日本Spatreatment眼膜保湿去细纹法令纹",
	"goodPrice": 219.00,
	"goodSold": 13
}, {
	"id": "17",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd17.jpg",
	"goodName": "【17】  韩国MEDIHEALNMF可莱丝针剂睡眠面膜",
	"goodPrice": 81.00,
	"goodSold": 128
}, {
	"id": "18",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd18.jpg",
	"goodName": "【18】  DHC蝶翠诗橄榄蜂蜜滋养洗脸手工皂90g",
	"goodPrice": 123.00,
	"goodSold": 77
}, {
	"id": "19",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd19.jpg",
	"goodName": "【19】  日本资生堂CPB肌肤之钥新版隔离霜 清爽型 30ml",
	"goodPrice": 429.00,
	"goodSold": 36
}, {
	"id": "20",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd20.jpg",
	"goodName": "【20】 Heinz亨氏 婴儿面条优加面条全素套餐组合3口味3盒",
	"goodPrice": 39.00,
	"goodSold": 61
}, {
	"id": "21",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd21.jpg",
	"goodName": "【21】  Heinz亨氏 乐维滋果汁泥组合5口味15袋",
	"goodPrice": 69.00,
	"goodSold": 55
}, {
	"id": "22",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd22.jpg",
	"goodName": "【22】  保税区直发澳大利亚Swisse高浓度蔓越莓胶囊30粒",
	"goodPrice": 271.00,
	"goodSold": 19
}, {
	"id": "23",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd23.jpg",
	"goodName": "【23】  挪威Nordic Naturals小鱼婴幼儿鱼油DHA滴剂",
	"goodPrice": 102.00,
	"goodSold": 125
}, {
	"id": "24",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd24.jpg",
	"goodName": "【24】  澳大利亚Bio island DHA for Pregnancy海藻油DHA",
	"goodPrice": 289.00,
	"goodSold": 28
}, {
	"id": "25",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd25.jpg",
	"goodName": "【25】  澳大利亚Fatblaster Coconut Detox椰子水",
	"goodPrice": 152.00,
	"goodSold": 17
}, {
	"id": "26",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd26.jpg",
	"goodName": "【26】  Suitsky舒比奇 高护极薄舒爽纸尿片尿不湿XL60",
	"goodPrice": 99.00,
	"goodSold": 181
}, {
	"id": "27",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd27.jpg",
	"goodName": "【27】  英国JUST SOAP手工皂 玫瑰天竺葵蛋糕皂",
	"goodPrice": 72.00,
	"goodSold": 66
}, {
	"id": "28",
	"goodImg": "http://www.mescroll.com/demo/res/img/pd28.jpg",
	"goodName": "【28】  德国NUK 多色婴幼儿带盖学饮杯",
	"goodPrice": 92.00,
	"goodSold": 138
}]
2.第三份插件准备工作

做了这些mock数据的准备工作。
一般我们期待在列表数据循环的时候，会有一个下拉刷新以及下拉加载最好还能有回到顶部的效果，这个时候我们采取一个第三方的库，我觉得还是十分好用 精致的下拉刷新和上拉加载 js 框架.支持 vue,完美运行于移动端和主流 PC 浏览器
在使用之前，我们先看一段布局情况

<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
		<view class="notice-warp">
			<view class="notice">商品的名称价格销量随时会变动,也可能会下架删除</view>
			<view class="notice">所以本Demo的下拉刷新会重置列表数据</view>
			<view class="btn-change" @click="isGoodsEdit == true ? (isGoodsEdit = false) : (isGoodsEdit = true)">{{ isGoodsEdit ? '已模拟后台修改信息, 请下拉刷新' : '点击模拟后台修改商品信息' }}
			</view>
		</view>
		<good-list :list="goods"></good-list>
</mescroll-body>
属性或方法含义
ref=“mescrollRef”字节跳动小程序 ref=“mescrollRef” 必须配置
@init=“mescrollInit”初始化，必须配置
@down=“downCallback”必须配置
@up=“upCallback”必须配置
:down=“downOption”下拉刷新的常用配置
:up=“upOption”上拉加载的常用配置
第三份插件的配置

因为我们一个项目中有很多地方需要使用到这个效果，所以我们需要做全局引入，注册为全局组件，方便我们使用。

// 在main.js中注册为全局组件
import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
Vue.component('mescroll-body', MescrollBody)
Vue.component('mescroll-uni', MescrollUni)

两个核心方法

方法含义
upCallback(page)上拉加载的回调
downCallback()下拉刷新的回调

核心代码

upCallback(page) {
				//联网加载数据
				apiGoods(page.num, page.size, this.isGoodsEdit).then(curPageData=>{
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;

					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
					//this.mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)

					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
					//this.mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)

					//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
					//this.mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)

					//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
					this.mescroll.endSuccess(curPageData.length);

					//设置列表数据
					if(page.num == 1) this.goods = []; //如果是第一页需手动制空列表
					this.goods=this.goods.concat(curPageData); //追加新数据
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			}

写在最后

代码同步在个人的码云上。

uniapp 下拉刷新和上拉加载更多
a_靖的博客
02-05 5867
uniapp 下拉刷新和下拉加载更多实现代码，兼容小程序，H5，app，真机测试可用。 实现代码 1.在页面写这两方法，分别是下拉刷新和下拉触底的监听事件 // 下拉刷新 onPullDownRefresh() { console.log('下拉刷新') setTimeout(() => { console.log('下拉刷新停止') uni.stopPullDownRefresh() },5500) }, // 上拉加载 onReachB
uniapp-数据列表下拉刷新上拉加载
优快云博客专家，系统架构师，有合作、疑惑请私信博主。
01-04 2286
界面 <template> <view> <view v-for="(item,index) of newList" :key="index" class="newList"> {{item.LINE_NAME}} </view> <view class="loading">{{loadingTxt}}</view> <
uniapp 中如何实现上拉加载,下拉刷新?
weixin_74535649
07-19 8160
uniapp 中如何实现上拉加载,下拉刷新?
uniapp内使用 mescroll
热门推荐
sunluyi的博客
05-20 1万+
官网地址：mescroll 这篇文章，主要介绍下mescroll的uni版本, mescroll-body和mescroll-uni两个组件的使用方式 两种组件的区别如下图 简单来说，如果我需要局部区域滚动 (如嵌在弹窗,浮层中)就用mescroll-uni 如果整屏滚动，滚动区域内有原生组件, 如video,map,canvas使用mescroll-body性能会更好 1、先在uniapp项目中导入mescroll插件 插件市场下载地址 1.3.5之前的版本，下载插件是在components文件内
uniapp 上拉加载下拉刷新 mescroll
weixin_42307129的博客
08-07 2984
之前自己用scroll-view 写的上垃加载和下拉刷新体验不是很好现在改成用mecsroll 不是uniapp 项目也可以用个人感觉体验还是非常棒的（有兴趣的老哥可以去看啊看源码）mecsroll 官网http://www.mescroll.com/uni.html#options <template> <mescroll-uni :down="downOpt...
uni-app 上拉刷新 下拉加载
ZgaoYi的博客
12-02 3995
uni-app 上拉刷新，下拉加载
uniapp上拉加载与下拉刷新
weixin_47092531的博客
05-17 474
uniapp上拉加载与下拉刷新
精选资源
uniapp实现下拉刷新及上拉加载更多的完整代码（app，H5，小程序均可使用）
11-14
内容概要：uniapp实现下拉刷新及上拉加载更多的完整代码（app，H5，小程序均可使用），下载后解压，使用HBuilder导入项目即可运行。 适合人群：少许编程基础人员即可. 适应场景：需要使用uniapp开发移动端时，涉及...
UniApp 实战：快速实现下拉刷新与上拉加载更多功能
最新发布
m0_57218017的博客
09-20 1431
本文详细介绍了在UniApp中实现列表下拉刷新和上拉加载功能的完整方案。通过配置pages.json启用下拉刷新，利用onPullDownRefresh和onReachBottom生命周期函数监听用户操作，结合页码管理实现数据分页加载。文章提供了完整的代码示例，包括列表渲染、数据加载逻辑以及样式处理，并针对常见问题给出解决方案。同时提出了性能优化建议和功能扩展方向，帮助开发者提升列表交互体验，适用于电商、资讯等各类列表场景。该方案跨平台兼容，是UniApp开发中的实用技巧。
uni-app上拉加载更多下拉刷新
qq_45479398的博客
08-16 728
uni-app上拉加载更多下拉刷新 布局 <template> <view> <view class="list" v-for="(item,index) in newsList" :key="index"> <view class="list-left"> <!-- <image :src="item.img"></image> --> </view> <view clas
uni-app上拉加载更多 --下拉刷新
逍遥的博客
03-18 3027
1、开启下拉功能在目录pages.json文件中找到首页位置给它添加“enablePullDownRefresh”: true完整代码如下 "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", "backgrou...
uni-app 简单的上拉刷新下拉加载
weixin_42320867的博客
09-17 2236
想要在uni-app中实现下拉刷新 首先需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh 就可以监听到下拉的过程 { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app", //在这里添加enablePullDownRefresh 是在当前页面开启下啦 必填项 "enablePullDownRef
【uni-app笔记整理六】下拉刷新与上拉加载
小异常的博客
12-25 1235
在一个项目中，刷新 是必不可少的一个功能，刷新 在软件中是指重新从服务器中请求获取最新的数据。 本篇博客主要围绕刷新这个主题来讲解 下拉刷新 和 上拉加载，这两个功能在移动端开发中也是常见的一项功能： 下拉刷新 是指下拉页面进行重新加载本页面的数据； 上拉加载 是指在到达页面底部时加载后面的数据。 这两个功能的区别在于 下拉刷新 是重新加载整个界面，而 上拉加载 是在现有数据的情况下再加载出另一部分数据。
mescroll-uni实现下拉刷新和上拉加载
qq_35197283的博客
09-23 1831
mescroll-uni mescroll-uni 是 uni-app 下拉刷新和上拉加载的组件，下载案例后，放到项目里 代码： <mescroll-uni top="130" @down="downCallback" @up="upCallback" :up="upOption" :down="downOption" class="message"> ... ... ......
uni-app 上拉加载下拉刷新
liuye066的专栏
11-10 1980
使用uni-app开发list列表，实现上拉加载下拉刷新的功能。 list列表： <uni-list :border="false"> <uni-list-item v-for="(item,index) in personList" :key="index" :border="false" direction="column" class="item" clickable @click="gotoDetail(item)"> <template v-slo
uni-app上拉加载，下拉刷新
hannikan的博客
10-12 292
onReachBottom（上拉加载） data(){ return { list: [], // 列表数组 pageSize: 10, // 条数 pageNum: 1, // 页数 allPageNum: 0 // 总页数 } }, //上拉加载 onReachBottom(){ if (this.pageNum >= this.allPageNum){ console.log('没有数据了') } else {
Eloquent ORM 关联查询(1) 加载方式
leo09999的博客
10-25 308
1、with User::with('userRole'); // 两条sql - 有待验证 // 只返回user信息 2、load/loadMisssing 按需加载 $user = User:get(); // 使用的时候才加载 $userRole = $user->load('userRole'); // $userRole 显示 user,userrole信息 // 两条sql...
uni-app之下拉刷新与 上拉加载
weixin_43845137的博客
04-06 3581
目录uni-app之下拉刷新与 上拉加载uni-app之下拉刷新page.json方式1 使用配置项的 形式开启下拉刷新页面 msg.vue方式2 自定义按钮事件 触发 uni.startPullDownRefresh()uni-app之上拉加载 ( 页面触底 )page.json 配置msg.vue 使用 页面触底 生命函数 onReachBottom uni-app之下拉刷新与 上拉加载 uni-app之下拉刷新 需要 在 page.json 文件之中 的对应的 page之中 设置 "enableP
uni-app电商项目实现上拉加载下拉刷新
m0_67019637的博客
12-17 404
函数，当列表数据请求成功之后，进行新旧数据的拼接处理。事件处理函数，用来监听页面的上拉触底行为。配置文件，修改页面配置上拉触底距离。1.在 data 中定义。1.打开项目根目录中的。
uniapp下拉刷新 上拉加载 怎么做
09-12
<think> 我们根据提供的引用信息，总结在uniapp中实现下拉刷新和上拉加载的方法。 主要步骤包括： 1. 在pages.json中配置页面，启用下拉刷新和设置上拉加载触底距离。 2. 在页面中编写下拉刷新事件处理函数onPullDownRefresh。 3. 在页面中编写上拉触底事件处理函数onReachBottom。 4. 在数据加载完成后，停止下拉刷新的动画（使用uni.stopPullDownRefresh()）。 5. 可能需要使用锁机制防止重复触发（根据引用[3]）。 具体步骤： 一、配置pages.json 在需要下拉刷新和上拉加载的页面对应的style中，设置： - enablePullDownRefresh: true // 开启下拉刷新 - onReachBottomDistance: 50 // 设置触底距离（单位px） 示例配置： ```json { "path": "pages/example/page", "style": { "navigationBarTitleText": "示例页面", "enablePullDownRefresh": true, "onReachBottomDistance": 50 } } ``` 二、页面实现下拉刷新 在页面的js中，定义onPullDownRefresh函数，通常在这个函数中重新加载数据（例如第一页数据），然后在数据加载完成后停止下拉刷新状态。 示例代码： ```javascript onPullDownRefresh() { console.log('下拉刷新触发'); // 重新加载数据，例如将页码重置为1，并清空列表 this.page = 1; this.dataList = []; this.getData(); // 调用获取数据的方法 }, methods: { // 获取数据的方法 getData() { // 模拟请求数据 uni.request({ url: 'your_api_url', data: { page: this.page }, success: (res) => { // 将新数据追加到列表中 this.dataList = this.dataList.concat(res.data.list); // 如果是下拉刷新，则停止刷新动画 if (this.page === 1) { uni.stopPullDownRefresh(); } // 根据返回数据判断是否还有更多数据 if (res.data.list.length < 10) { // 假设每页10条 this.loadingType = 2; // 没有更多数据 } else { this.loadingType = 0; // 重置为初始状态，可以加载更多 } }, fail: (err) => { // 错误处理 uni.stopPullDownRefresh(); } }); } } ``` 三、页面实现上拉加载 在页面的js中，定义onReachBottom函数，在这个函数中加载下一页数据。 示例代码： ```javascript onReachBottom() { console.log('上拉触底触发'); // 如果已经标记没有更多数据，则直接返回 if (this.loadingType === 2) { return; } // 锁机制：防止重复触发，如果正在加载中，则返回 if (this.loadingType === 1) { return; } this.loadingType = 1; // 标记为加载中 this.page++; this.getData(); } ``` 四、防止重复请求（加锁） 在上拉加载时，我们通过loadingType来标记状态： - 0: 初始状态，可以加载更多 - 1: 正在加载中，避免重复触发 - 2: 没有更多数据 在getData方法中，根据返回的数据设置loadingType。 五、使用uni-load-more组件（可选） 根据引用[1]，我们可以使用uni-load-more组件来显示加载状态。 在模板中添加： ```html <uni-load-more :status="loadingType"></uni-load-more> ``` 注意：status的值可以是字符串，如'loading'（加载中）、'noMore'（没有更多）、'more'（还有更多，但未加载）。我们可以根据loadingType的不同值进行转换。 但是，根据上面的代码，我们用数字表示状态，所以可能需要转换： - 0: 'more' （还有更多，但没有在加载中，实际上我们初始状态可以显示“点击加载更多”，但这里我们通常不会显示，所以一般直接使用0,1,2对应组件的状态） - 1: 'loading' （加载中） - 2: 'noMore' （没有更多） 因此，我们可以将loadingType改为字符串，或者在组件上做转换。建议使用字符串直接对应组件的status。 修改： - 初始状态：loadingType = 'more' - 加载中：loadingType = 'loading' - 没有更多：loadingType = 'noMore' 那么，在getData方法中： ```javascript getData() { // ... 请求前 this.loadingType = 'loading'; // 但是注意：下拉刷新的时候，我们并没有设置loadingType为loading，因为下拉刷新时我们重新加载第一页，此时上拉加载的状态应该重置。 // 所以，在下拉刷新时（page=1），我们可以将loadingType设为'loading'（表示下拉刷新的加载，同时上拉加载的状态重置），但注意不要影响上拉加载的状态。实际上，我们需要区分开，但通常下拉刷新后，上拉加载的状态会重置为初始状态（即还有更多）或者根据数据判断。 // 建议：在重新加载第一页（下拉刷新）时，将loadingType重置为'more'（当数据加载完成后，再根据是否有更多数据来设置） // 具体调整： uni.request({ // ... 其他同上 success: (res) => { if (this.page === 1) { this.dataList = res.data.list; uni.stopPullDownRefresh(); } else { this.dataList = this.dataList.concat(res.data.list); } // 判断是否还有更多 if (res.data.list.length < 10) { this.loadingType = 'noMore'; } else { this.loadingType = 'more'; } } }); } ``` 同时，在onPullDownRefresh中： ```javascript onPullDownRefresh() { this.page = 1; // 这里可以设置一个变量，让getData知道是下拉刷新，然后重置loadingType为'more'，但也可以直接在getData中重置（因为page=1） this.getData(); } ``` 在onReachBottom中： ```javascript onReachBottom() { if (this.loadingType !== 'more') { return; } this.page++; this.getData(); } ``` 但是注意：在getData请求开始时，我们设置this.loadingType = 'loading'，这样在加载过程中，会显示加载图标，同时防止重复触发。 因此，完整的getData方法： ```javascript getData() { // 显示加载状态 this.loadingType = 'loading'; uni.request({ url: 'your_api_url', data: { page: this.page, pageSize: 10 }, success: (res) => { // 如果是第一页，则是下拉刷新，需要重置列表 if (this.page === 1) { this.dataList = res.data.list; // 停止下拉刷新动画 uni.stopPullDownRefresh(); } else { // 追加数据 this.dataList = this.dataList.concat(res.data.list); } // 判断是否还有更多数据 if (res.data.list.length < 10) { this.loadingType = 'noMore'; } else { this.loadingType = 'more'; } }, fail: (err) => { // 失败时，重置状态为'more'，以便可以重新加载 this.loadingType = 'more'; if (this.page === 1) { uni.stopPullDownRefresh(); } // 如果请求失败，可能需要将页码减回去（因为这次加载失败了） if (this.page > 1) { this.page--; } } }); } ``` 六、在页面中使用 在模板中，我们可以使用scroll-view或者直接使用页面滚动。注意，如果使用页面滚动，则不需要额外的容器，但要注意页面布局。 同时，在页面底部放置uni-load-more组件： ```html <template> <view> <!-- 列表内容 --> <view v-for="(item, index) in dataList" :key="index"> <!-- 每一项的内容 --> </view> <!-- 加载更多组件 --> <uni-load-more :status="loadingType"></uni-load-more> </view> </template> ``` 注意：uni-load-more组件需要安装，如果没有安装，可以通过HBuilderX的插件市场安装，或者手动将组件导入到项目中。 七、注意事项 1. 在pages.json中配置了enablePullDownRefresh为true，才能触发页面的onPullDownRefresh事件。 2. 上拉触底事件onReachBottom是页面触底时自动触发的，无需额外配置，但需要设置触底距离（onReachBottomDistance）。 3. 停止下拉刷新必须手动调用uni.stopPullDownRefresh()，否则下拉刷新的动画会一直显示。 4. 如果列表数据已经全部加载完毕，应该显示“没有更多数据”，并阻止继续加载。 综上所述，我们给出了实现下拉刷新和上拉加载的完整步骤和代码示例。 根据引用[4]和[5]中的代码，我们还注意到在onPullDownRefresh和onReachBottom中直接写业务逻辑也是可以的，但为了代码复用，通常将数据请求提取到单独的方法中。 最后，生成相关问题： </think> 在 UniApp 中实现下拉刷新和上拉加载功能，可以通过以下步骤实现： ### 完整实现方法 #### 1. **配置 `pages.json`** ```json { "pages": [ { "path": "pages/yourPage", "style": { "enablePullDownRefresh": true, // 启用下拉刷新 "onReachBottomDistance": 50 // 触底距离（单位px） } } ] } ``` #### 2. **页面逻辑实现** ```javascript export default { data() { return { dataList: [], // 数据列表 page: 1, // 当前页码 loadingType: 0, // 0:正常 1:加载中 2:无更多 } }, // 下拉刷新回调 onPullDownRefresh() { this.page = 1; // 重置页码 this.loadData('refresh'); }, // 上拉触底回调 onReachBottom() { if (this.loadingType !== 0) return; // 防止重复加载 this.page++; this.loadData('loadmore'); }, methods: { // 统一数据加载方法 async loadData(type) { // 锁定加载状态 this.loadingType = 1; try { const res = await uni.request({ url: 'your_api_url', data: { page: this.page } }); // 下拉刷新：重置数据 if (type === 'refresh') { this.dataList = res.data.list; uni.stopPullDownRefresh(); // 停止刷新动画 } // 上拉加载：追加数据 else if (type === 'loadmore') { this.dataList = [...this.dataList, ...res.data.list]; } // 更新加载状态 this.loadingType = res.data.list.length ? 0 : 2; } catch (e) { this.loadingType = 0; uni.stopPullDownRefresh(); } } } } ``` #### 3. **模板中使用 `uni-load-more` 组件** ```html <template> <view> <!-- 数据列表 --> <view v-for="item in dataList" :key="item.id">{{ item.name }}</view> <!-- 加载状态提示 --> <uni-load-more :status="loadingType === 0 ? 'more' : loadingType === 1 ? 'loading' : 'no-more'" /> </view> </template> ``` ### 关键点说明 1. **防止重复加载锁机制** ```javascript if (this.loadingType !== 0) return; // 通过 loadingType 控制请求状态 ``` 防止多次触发请求（引用[3]） 2. **下拉刷新后重置数据** ```javascript onPullDownRefresh() { this.page = 1; // 重置到第一页 this.loadData('refresh'); } ``` 3. **触底距离配置** ```json "onReachBottomDistance": 50 // 距底部50px时触发（引用[5]） ``` 4. **停止刷新动画** ```javascript uni.stopPullDownRefresh(); // 数据返回后必须调用（引用[4]） ``` ### 相关问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值