init

uni_modules/mescroll-uni/hooks/useMescroll.js

@@ -0,0 +1,66 @@
+// 小程序无法在hook中使用页面级别生命周期,需单独传入: https://ask.dcloud.net.cn/question/161173
+// import { onPageScroll, onReachBottom, onPullDownRefresh} from '@dcloudio/uni-app';
+
+/** 
+ * 初始化mescroll, 相当于vue2的mescroll-mixins.js文件 (mescroll-body 和 mescroll-uni 通用) 
+ * mescroll-body需传入onPageScroll, onReachBottom
+ * mescroll-uni无需传onPageScroll, onReachBottom
+ * 当down.native为true时,需传入onPullDownRefresh
+ */ 
+function useMescroll(onPageScroll, onReachBottom, onPullDownRefresh){
+	// mescroll实例对象
+	let mescroll = null;
+	
+	// mescroll组件初始化的回调,可获取到mescroll对象
+	const mescrollInit = (e)=> {
+		mescroll = e;
+	}
+	
+	// 获取mescroll对象, mescrollInit执行之后会有值, 生命周期created中会有值
+	const getMescroll = ()=>{
+		return mescroll
+	}
+	
+	// 下拉刷新的回调 (mixin默认resetUpScroll)
+	const downCallback = ()=> {
+		if(mescroll.optUp.use){
+			mescroll.resetUpScroll()
+		}else{
+			setTimeout(()=>{
+				mescroll.endSuccess();
+			}, 500)
+		}
+	}
+	
+	// 上拉加载的回调
+	const upCallback = ()=> {
+		// mixin默认延时500自动结束加载
+		setTimeout(()=>{
+			mescroll.endErr();
+		}, 500)
+	}
+	
+	// 注册系统自带的下拉刷新 (配置down.native为true时生效, 还需在pages配置enablePullDownRefresh:true;详请参考mescroll-native的案例)
+	onPullDownRefresh && onPullDownRefresh(() => {
+	  mescroll && mescroll.onPullDownRefresh();
+	})
+	
+	// 注册列表滚动事件,用于判定在顶部可下拉刷新,在指定位置可显示隐藏回到顶部按钮 (此方法为页面生命周期,无法在子组件中触发, 仅在mescroll-body生效)
+	onPageScroll && onPageScroll(e=>{
+		mescroll && mescroll.onPageScroll(e);
+	})
+	
+	// 注册滚动到底部的事件,用于上拉加载 (此方法为页面生命周期,无法在子组件中触发, 仅在mescroll-body生效)
+	onReachBottom && onReachBottom(()=>{
+		mescroll && mescroll.onReachBottom();
+	}) 
+	
+	return {
+		getMescroll,
+		mescrollInit,
+		downCallback,
+		upCallback
+	}
+}
+
+export default useMescroll

uni_modules/mescroll-uni/hooks/useMescrollComp.js

@@ -0,0 +1,56 @@
+import { ref } from 'vue';
+
+// 小程序无法在hook中使用页面级别生命周期,需单独传入: https://ask.dcloud.net.cn/question/161173
+// import { onPageScroll, onReachBottom, onPullDownRefresh} from '@dcloudio/uni-app';
+
+/** 
+ * mescroll-body写在子组件时,需通过useMescrollComp补充子组件缺少的生命周期, 相当于vue2的mescroll-comp.js文件
+ * 必须传入onPageScroll, onReachBottom
+ * 当down.native为true时,需传入onPullDownRefresh
+ */ 
+function useMescrollComp(onPageScroll, onReachBottom, onPullDownRefresh){
+	// 因为子组件无onPageScroll和onReachBottom的页面生命周期，需在页面传递进到子组件
+	onPageScroll(e=>{
+		handlePageScroll(e)
+	})
+	
+	onReachBottom(()=>{
+		handleReachBottom()
+	})
+	
+	// 当down的native: true时, 还需传递此方法进到子组件
+	onPullDownRefresh && onPullDownRefresh(()=>{
+		handlePullDownRefresh()
+	})
+	
+	const mescrollItem = ref(null)
+	
+	const handlePageScroll = (e)=>{
+		const mescroll = getMescroll()
+		mescroll && mescroll.onPageScroll(e);
+	}
+	
+	const handleReachBottom = ()=>{
+		const mescroll = getMescroll()
+		mescroll && mescroll.onReachBottom();
+	}
+	
+	const handlePullDownRefresh = ()=>{
+		const mescroll = getMescroll()
+		mescroll && mescroll.onPullDownRefresh();
+	}
+	
+	const getMescroll = ()=>{
+		if(mescrollItem.value && mescrollItem.value.getMescroll){
+			return mescrollItem.value.getMescroll()
+		}
+		return null
+	}
+	
+	return {
+		mescrollItem,
+		getMescroll
+	}
+}
+
+export default useMescrollComp

uni_modules/mescroll-uni/hooks/useMescrollMore.js

@@ -0,0 +1,69 @@
+import { ref  } from 'vue';
+
+// 小程序无法在hook中使用页面级别生命周期,需单独传入: https://ask.dcloud.net.cn/question/161173
+// import { onPageScroll, onReachBottom, onPullDownRefresh} from '@dcloudio/uni-app';
+
+/** mescroll-more示例写在子组件时,需通过useMescrollMore补充子组件缺少的生命周期, 相当于vue2的mescroll-more.js文件 */ 
+function useMescrollMore(mescrollItems, onPageScroll, onReachBottom, onPullDownRefresh){
+	// 当前tab下标
+	const tabIndex = ref(0) 
+	
+	// 因为子组件无onPageScroll和onReachBottom的页面生命周期，需在页面传递进到子组件
+	onPageScroll && onPageScroll(e=>{
+		handlePageScroll(e)
+	})
+	
+	onReachBottom && onReachBottom(()=>{
+		handleReachBottom()
+	})
+	
+	// 当down的native: true时, 还需传递此方法进到子组件
+	onPullDownRefresh && onPullDownRefresh(()=>{
+		handlePullDownRefresh()
+	})
+	
+	const handlePageScroll = (e)=>{
+		let mescroll = getMescroll(tabIndex.value);
+		mescroll && mescroll.onPageScroll(e);
+	}
+	const handleReachBottom = ()=>{
+		let mescroll = getMescroll(tabIndex.value);
+		mescroll && mescroll.onReachBottom();
+	}
+		
+	const handlePullDownRefresh = ()=>{
+		let mescroll = getMescroll(tabIndex.value);
+		mescroll && mescroll.onPullDownRefresh();
+	}
+	
+	// 根据下标获取对应子组件的mescroll
+	const getMescroll = (i)=>{
+		if (mescrollItems && mescrollItems[i]) {
+			return mescrollItems[i].value.getMescroll()
+		} else{
+			return null
+		}
+	}
+	
+	// 切换tab,恢复滚动条位置
+	const scrollToLastY = ()=>{
+		let mescroll = getMescroll(tabIndex.value);
+		if(mescroll){
+			// 恢复上次滚动条的位置
+			let y = mescroll.getScrollTop()
+			mescroll.scrollTo(y, 0)
+			// 再次恢复上次滚动条的位置, 确保元素已渲染
+			setTimeout(()=>{
+				mescroll.scrollTo(y, 0)
+			},20)
+		}
+	}
+	
+	return {
+		tabIndex,
+		getMescroll,
+		scrollToLastY
+	}
+}
+
+export default useMescrollMore