使用keep-alive缓存使用better-scroll导致的页面无法滚动滑动的问题

使用keep-alive缓存使用better-scroll导致的页面无法滚动滑动的问题

betterScroll封装到一个组合式函数里 做成组件<scroll></scroll>使用

//App.vue
 <router-view v-slot="{ Component }">
      <transition name="router">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </transition>
 </router-view>

//use-scroll.ts
import BScroll from '@better-scroll/core';
import ObserveDOM from '@better-scroll/observe-dom';
import type { Ref } from 'vue';
import { onActivated, onMounted, onUnmounted, ref, nextTick} from 'vue';


BScroll.use(ObserveDOM)
export default <T>(wrapperRef: Ref<HTMLElement | undefined>, options: T) => {
  const scroll = ref()
  // 使用onActivated生命周期在keepAlive激活缓存时调用 
  // 解决keepAlive组件缓存导致BScroll无法使用问题
  onActivated(async () => {
    if (!wrapperRef.value||!scroll.value) return
    await nextTick()
    scroll.value.refresh()
  })
  onMounted(() => {
    if (!wrapperRef.value) return
    scroll.value = new BScroll(wrapperRef.value, {
      observeDOM: true,
      probeType: 3,
      click: true,
      ...options,
    })
  })
  onUnmounted(() => {
    scroll.value.destroy()
  })
}

是keep-alive缓存的原因，当缓存的组件重新插入DOM树时BScrol会失效
添加onActivated钩子函数
使用onActivated生命周期在keepAlive激活缓存时调用
解决keepAlive组件缓存导致BScroll失效无法使用的问题