1/uni_modules/mescroll-uni/hooks/useMescrollComp.js

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