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

最新推荐文章于 2024-08-22 11:53:20 发布
最新推荐文章于 2024-08-22 11:53:20 发布
阅读量1.5k 收藏 3
点赞数 1
分类专栏： uniapp vue 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ccc0720/article/details/108323409
版权

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();
				})
			}

写在最后

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

c_磊
关注
专栏目录
uniapp 下拉刷新和上拉加载更多
a_靖的博客
02-05 5451
uniapp 下拉刷新和下拉加载更多实现代码，兼容小程序，H5，app，真机测试可用。 实现代码 1.在页面写这两方法，分别是下拉刷新和下拉触底的监听事件 // 下拉刷新 onPullDownRefresh() { console.log('下拉刷新') setTimeout(() => { console.log('下拉刷新停止') uni.stopPullDownRefresh() },5500) }, // 上拉加载 onReachB
uni-app上拉加载更多 --下拉刷新
逍遥的博客
03-18 2799
1、开启下拉功能在目录pages.json文件中找到首页位置给它添加“enablePullDownRefresh”: true完整代码如下 "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", "backgrou...
uni-app 上拉刷新 下拉加载
ZgaoYi的博客
12-02 3933
uni-app 上拉刷新，下拉加载
uniapp实现区域滚动、下拉刷新、上滑滚动加载更多
最新发布
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
08-22 4353
scroll-view自定义滚动区域，通过css样式，让滚动区域自适应整个屏幕剩余空间。min-height:0;设置为0
uniapp上拉加载与下拉刷新
weixin_47092531的博客
05-17 425
uniapp上拉加载与下拉刷新
uni-app上拉加载更多下拉刷新
qq_45479398的博客
08-16 665
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 简单的上拉刷新下拉加载
weixin_42320867的博客
09-17 2139
想要在uni-app中实现下拉刷新 首先需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh 就可以监听到下拉的过程 { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app", //在这里添加enablePullDownRefresh 是在当前页面开启下啦 必填项 "enablePullDownRef
uniapp实现下拉刷新及上拉加载更多的完整代码（app，H5，小程序均可使用）
11-14
内容概要：uniapp实现下拉刷新及上拉加载更多的完整代码（app，H5，小程序均可使用），下载后解压，使用HBuilder导入项目即可运行。 适合人群：少许编程基础人员即可. 适应场景：需要使用uniapp开发移动端时，涉及...
uniapp基于z-paging实现页面下拉刷新、上拉加载，分页加载案例
11-19
在本文中，我们将深入探讨如何使用uniapp与z-paging插件来实现页面的下拉刷新、上拉加载以及分页加载功能。这些是移动应用和Web应用中常见的交互模式，能够提供更好的用户体验，使用户可以轻松地查看和加载更多数据...
小程序swiper实现tab切换--下拉刷新、上拉加载更多.zip
07-23
本项目中，开发者利用Swiper和Swiper-Item组件，结合下拉刷新和上拉加载更多的功能，构建了一个交互性强、用户体验良好的小程序界面。 1. **Swiper组件**： Swiper是微信小程序中的一个容器组件，可以用来展示一...
uniapp新闻列表-上拉刷新-下拉加载更多.zip
12-08
综上所述，"uniapp新闻列表-上拉刷新-下拉加载更多"这个项目涵盖了uniapp的基础知识、组件使用、数据管理、用户交互以及页面路由等多个方面，是一个全面了解和实践uniapp开发的良好实例。通过这个项目，开发者不仅...
【uni-app笔记整理六】下拉刷新与上拉加载
小异常的博客
12-25 958
在一个项目中，刷新 是必不可少的一个功能，刷新 在软件中是指重新从服务器中请求获取最新的数据。 本篇博客主要围绕刷新这个主题来讲解 下拉刷新 和 上拉加载，这两个功能在移动端开发中也是常见的一项功能： 下拉刷新 是指下拉页面进行重新加载本页面的数据； 上拉加载 是指在到达页面底部时加载后面的数据。 这两个功能的区别在于 下拉刷新 是重新加载整个界面，而 上拉加载 是在现有数据的情况下再加载出另一部分数据。
mescroll-uni实现下拉刷新和上拉加载
qq_35197283的博客
09-23 1729
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 1810
使用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 215
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 241
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 3458
目录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 320
函数，当列表数据请求成功之后，进行新旧数据的拼接处理。事件处理函数，用来监听页面的上拉触底行为。配置文件，修改页面配置上拉触底距离。1.在 data 中定义。1.打开项目根目录中的。
uniapp下拉刷新上拉加载
yan263364的博客
12-16 1944
一、需求 留言板主页，显示所有的留言信息，带有分页功能；上拉加载数据，下拉刷新数据 二、代码 1、pages.json 2、messageBoard.vue 用了 uniapp 提供的组件： uni-load-more.vue <uni-load-more :status="loadingText" :contentText="contentText" ></uni-load-more> const loadingTextObj = { more: 'more', no
uniapp 怎么实现下拉刷新上拉加载
03-25
A：在uni-app中，可以通过在组件上绑定相关事件来实现下拉刷新和上拉加载的功能。常用的组件包括`<scroll-view>`、`<list>`、`<recycle-list>`等。 1. 下拉刷新：使用`<scroll-view>`组件，并绑定其下拉刷新事件。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值