初始化仓库

src/components/mescroll-item.vue

@@ -0,0 +1,97 @@
+
+<template>
+    <!-- 不能用v-if (i: 每个tab页的专属下标;  index: 当前tab的下标 )-->
+    <view v-show="i === index">
+		<!-- top="120"下拉布局往下偏移,防止被悬浮菜单遮住 -->
+		<mescroll-body @init="mescrollInit" top="120" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
+			<!-- 数据列表 -->
+			123
+		</mescroll-body>
+	</view>
+</template>
+
+<script lang="ts" setup name="mescrollItem">
+	import { ref, watch } from 'vue'
+	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
+
+    const props = defineProps({
+		i: Number, // 每个tab页的专属下标
+		index: { // 当前tab的下标
+			type: Number,
+			default() {
+				return 0
+			}
+		},
+		tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
+			type: Array,
+			default() {
+				return []
+			}
+		}
+	})
+
+    const { mescrollInit, downCallback, getMescroll } = useMescroll() // 调用mescroll的hook
+   	defineExpose({ getMescroll }) // 使父组件可以通过ref调用到getMescroll方法 (必须)
+	
+	const isAutoInit = props.i === props.index // 自动加载当前tab的数据
+	const downOption = {
+		auto: isAutoInit // 自动加载当前tab的数据
+	}
+	console.log("🚀 ~ downOption:", downOption)
+
+    const upOption = {
+		auto:false, // 不自动加载
+		noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
+		empty:{
+			tip: '~ 空空如也 ~', // 提示
+			btnText: '去看看'
+		}
+	}
+	
+    const isInit = ref(isAutoInit) // 当前tab是否已初始化
+	const goods = ref([]) // 数据列表
+
+    // 监听下标的变化
+	watch(
+	()=> props.index, 
+	(val)=>{
+		if (props.i === val && !isInit.value) mescrollTrigger()
+	})
+	
+	// 主动触发加载
+	const mescrollTrigger = ()=>{
+		isInit.value = true; // 标记为true
+		const mescroll = getMescroll()
+		if (mescroll) {
+			if (mescroll.optDown.use) {
+				mescroll.triggerDownScroll();
+			} else{
+				mescroll.triggerUpScroll();
+			}
+		}
+	}
+	
+	/*上拉加载的回调: 其中mescroll.num:当前页 从1开始, mescroll.size:每页数据条数,默认10 */
+	const upCallback = (mescroll)=>{
+		// let word = props.tabs[props.i].name // 具体项目中,您可能取的是tab中的type,status等字段
+		// apiGoods(mescroll.num, mescroll.size, word).then(res=>{
+		// 	const list = res.list || [] // 当前页数据
+		// 	if(mescroll.num == 1) goods.value = []; //如果是第一页需手动制空列表
+		// 	goods.value = goods.value.concat(list); //追加新数据
+		// 	mescroll.endSuccess(list.length); // 请求成功, 结束加载
+		// }).catch(()=>{
+			mescroll.endErr(); // 请求失败, 结束加载
+		// })
+	}
+	
+	//点击空布局按钮的回调
+	const emptyClick = ()=>{
+		uni.showToast({
+			title:'点击了按钮,具体逻辑自行实现'
+		})
+	}
+</script>
+
+<style lang="scss" scoped>
+//
+</style>