Vue3-使用hooks钩子封装一个Scroll滚动组件.

在移动端中， 我们需要在滚动中做的更好， 比如回弹， 监听上拉加载更多， 下拉刷新页面， 触底等， 但是在原生的JS滚动中， 我们并不能做到这样的效果， 我个人在大部分情况下都会选择 BetterScroll2.0 作为我的组件库进行使用， 这篇文章介绍如何去使用这个组件去封装一个自己的Scroll组件.

依赖库:

• BetterSroll2.0
• vue3 插槽 slot

安装

yarn add @better-scroll/core
import BScroll from "@better-scorll/core"

分别选择使用这二个插件， 可以动态的帮我们计算， 然后刷新 refresh .

• 分别安装
• yarn add @better-scroll/observe-image -S
• yarn add @better-scroll/observe-dom -S

Vue组件:

<template>
  <div ref="WarpperRef">
  // 改WarpperRef层必须要有一个确定的高度， 内部容器高度大于父容器高度， 才能滚动
    <slot></slot>
  </div>
</template>

<script setup>
import useScroll from './use-scroll.js';
import {ref, defineProps, defineEmit, useContext}  from 'vue'

const props = defineProps({
  probeType:{
    type: Number,
    default: 0
  }
})

const emits = defineEmit(['onScroll'])

const {scroll, WarpperRef} = useScroll(scrollRef, props, emits)

const {expose} = useContext()
expose({
  scroll
})
</script>

Hooks function :

import BScroll from "@better-scroll/core";
import ObserveDom from "@better-scorll/observe-dom"
import ObserveImage from "@better-scroll/observe-image"
import {ref, onMounted, onUnmounted} from "vue"
// 如果使用了 keep-alive 那么mounted只会执行一次， 只需要监测 onActive等事件

BScroll.use(ObserveDom);
BScroll.use(ObserveImage)


export default function useScroll(props, emits){
	const WapperRef = ref(null)
	const Scroll = ref(null)
	onMounted(() => {
		const s = Scroll.value = new BScroll(WapperRef.value,  {
			observeDom:true,
			observeImage:true,
			click:true,
			...props
		})
		if(props.probeType > 0){
				s.on("scroll", (position) => {
					emits("onScroll", position)
				})
			}
	})

	onUnmounted(() => {
		Scroll.value.destroy()
	})
	return {
		WapperRef,
		Scroll
	}
}