uniapp中使用Mescroll实现下拉刷新与上拉加载项目实战

news2024/11/28 17:31:16

如何在UniApp中使用Mescroll实现下拉刷新与上拉加载

前言

下拉刷新和上拉加载更多成为了提升用户体验不可或缺的功能。UniApp作为一个跨平台的应用开发框架，支持使用Vue.js语法编写多端（iOS、Android、H5等）应用。Mescroll作为一款专为Vue设计的滚动插件，可以很好地满足我们在UniApp项目中的需求。
使用【wxs+renderjs实现】高性能的下拉刷新上拉加载组件。
支持uni-app的下拉刷新和上拉加载的组件,支持原生页面和局部区域滚动。

`Mescroll` 使用

mescroll 官网
组件案例

步骤一、打开HbuilderX插件市场下载插件，并选择一个项目导入

具体目录结构：

步骤二、在`main.js`注册全局组件, 方便省去具体页面中引入和注册`mescroll`组件的代码

如何在UniApp中使用Mescroll实现下拉刷新与上拉加载项目实战

步骤三、在`index.vue`页面中使用 `<mescroll-body>` 组件将需要下拉上拉的块包裹起来，如下代码

<template>
	<view class="content">
		<!-- 搜索框在小程序中显示 -->
		<!-- #ifdef MP -->
		<search-input @click.native="navTo('/pages/search/search')"></search-input>
		<!-- #endif -->
		<!-- 轮播图 -->
		<banner :bannerList="bannerList"></banner>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption">
			<!-- 分类区域 -->
			<category-box :categoryList="categoryList"></category-box>
			<!-- 热门推荐 -->
			<view class="list-container">
				<swiper-course name="热门推荐" word="HOT" :courseData="hotCourseList"></swiper-course>
				<scroll-course name="近期上新" word="NEW" :courseData="newCourseList"></scroll-course>
				<swiper-course name="免费精选" word="FREE" :courseData="freeCourseList"></swiper-course>
				<!-- 付费精品 -->
				<list-course name="付费精品" word="NICE" :courseData="payCourseList"></list-course>
			</view>
		</mescroll-body>
	</view>
</template>

如何在UniApp中使用Mescroll实现下拉刷新与上拉加载项目实战
模板属性解释：
mescroll-body: 这是Mescroll的核心组件，用于包裹需要实现下拉刷新和上拉加载功能的内容。
ref="mescrollRef": 通过ref引用，可以在脚本中访问Mescroll实例。
@init="mescrollInit": 当Mescroll初始化完成时，触发mescrollInit方法。
@down="downCallback": 当用户下拉时，触发downCallback方法。
@up="upCallback": 当用户上拉时，触发upCallback方法。
:down="downOption": 绑定下拉刷新的配置选项。

步骤四、导入相关模块，引入 `mescroll-mixins.js`，并使用mixin

import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
export default {
	mixins: [MescrollMixin]
}

步骤五、下拉刷新的配置选项，offset表示下拉多少距离后开始刷新。

data() {
	return {
		downOption: { // 3. 下拉刷新
			offset: 50, // 下拉高度多少，开始刷新
		}
	}
},

步骤六、设置上拉下拉函数

upCallback 方法既用于处理上拉加载更多，也用于处理下拉刷新的情况
下拉刷新的处理:当用户下拉页面时，Mescroll 会触发 downCallback 方法。在这个方法中，我们调用了 upCallback 方法，并传入了 { num: 1, size: 10 } 作为参数。这样做的目的是为了在下拉刷新时重新加载第一页的数据。
上拉加载的处理:当用户上拉页面时，Mescroll 会触发 upCallback 方法。这个方法会根据传入的 page 参数来决定加载哪一页的数据。

代码如下：

// 下拉上拉
async upCallback(page) {
	if (page.num === 1) {
		// this.loadBannerData()
		this.loadCateData()
		this.loadHotCourseData()
		this.loadNewCourseData()
		this.loadFreeCourseData()
		// this.loadPayCourseData()
	}
	//付费精品，带分页功能，isFree:0收费，1免费
	const {
		data
	} = await api.getList({
		isFree: 1
	}, page.num, page.isze)
	const curList = data.records

	// 如果第一页需要手动设置空列表
	if (page.num == 1) this.payCourseList = [];
	// 追加新数据
	this.payCourseList = this.payCourseList.concat(curList)
	// 请求成功, 隐藏加载状态，判断是否数据全部加载完（后台接口有返回列表的总数据量total)
	this.mescroll.endBySize(curList.length, data.total)
},

关键逻辑：

page.num === 1：如果当前页码是1，说明这是第一次加载数据，通常在下拉刷新时会触发。在这种情况下，我们加载分类、热门推荐、最近上新和免费精选的数据。
page.num > 1：如果当前页码大于1，说明这是上拉加载更多数据。在这种情况下，我们只加载付费精品的数据。

详细步骤:

下拉刷新：
用户下拉页面，触发 downCallback。 downCallback 调用 upCallback，传入 { num: 1,> size: 10 }。 upCallback 根据 page.num === 1，加载第一页的数据，包括分类、热门推荐、最近上新和免费精选的数据。加载完成后，调用this.mescroll.endBySize(curList.length, data.total) 结束加载状态。
上拉加载：
用户上拉页面，触发 upCallback。 upCallback 根据 page.num 和 page.size，加载相应页码的数据，通常是付费精品的数据。加载完成后，调用 this.mescroll.endBySize(curList.length,data.total) 结束加载状态。