移动mescroll插件

src/pages/index/index.vue

@@ -64,6 +64,13 @@
 				<wd-img class="absolute-center" width="252.04rpx" height="24.43rpx" :src="`${OSS}images/home_image3.png`" mode="aspectFit"/>
 				<text class="text-32rpx text[#303133] leading-44rpx font-500 absolute-center">预约茶室</text>
 			</view>
+
+			<view class="">
+				<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
+					<!-- <good-list :list="goods"></good-list> -->
+					<view class=""></view>
+				</mescroll-body>
+			</view>
 		</view>
 	</view>
 </template>
@@ -71,7 +78,9 @@
 <script lang="ts" setup>
 	import { ref, inject } from 'vue'
 	import { getNavBarHeight } from '@/utils/index'
-
+	import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
+	import useMescroll from "@uni_modules/mescroll-uni/hooks/useMescroll.js";
+	
 	let navbarHeight = ref(0)
 	let OSS = inject('OSS')
 	let swiperList = ref([
@@ -79,8 +88,8 @@
 		{ id: 2, image: `${OSS}images/banner1.png` },
 		{ id: 3, image: `${OSS}images/banner1.png` }
 	])
-	console.log("🚀 ~ swiperList:", swiperList)
 	const current = ref<number>(0)
+	const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
 
 	onLoad(() => {
 		navbarHeight.value = getNavBarHeight()
@@ -98,6 +107,31 @@
 		}
 	}
 
+	// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
+	const upCallback = (mescroll)=>{
+		// apiGoods(mescroll.num, mescroll.size).then(res=>{
+		// 	const curPageData = res.list || [] // 当前页数据
+		// 	if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
+		// 	goods.value = goods.value.concat(curPageData); //追加新数据
+		// 	//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
+		// 	//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
+			
+		// 	//方法一(推荐): 后台接口有返回列表的总页数 totalPage
+		// 	//mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
+			
+		// 	//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
+		// 	//mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
+			
+		// 	//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
+		// 	//mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
+			
+		// 	//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
+		// 	mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
+		// }).catch(()=>{
+		// 	mescroll.endErr(); // 请求失败, 结束加载
+		// })
+	}
+
 </script>
 
 <style lang="scss">