56 lines
1.5 KiB
JavaScript
56 lines
1.5 KiB
JavaScript
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 |