uniapp ios去掉上拉下拉 uniapp上拉刷新下拉加载

转载

笑傲江湖求败 2023-11-29 14:38:05

文章标签 uniapp ios去掉上拉下拉 javascript vue.js 数据下拉刷新 文章分类 iOS 移动开发

uniapp

是基于vue生态的，兼容多端的解决方案的一个框架。
其编码风格和原生的信微信小程序有极为相似。
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();
				})
			}

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。