封装组件：

封装组件用的ｊｓ：

import BScroll from '@better-scroll/core'
import ObserveDOM from '@better-scroll/observe-dom'
import { onMounted, onUnmounted, onActivated, onDeactivated, ref } from 'vue'

BScroll.use(ObserveDOM)

export default function useScroll(wrapperRef, options, emit) {
  const scroll = ref(null)

  onMounted(() => {
    const scrollVal = scroll.value = new BScroll(wrapperRef.value, {
      observeDOM: true,
      ...options
    })

    if (options.probeType > 0) {
      scrollVal.on('scroll', (pos) => {
        emit('scroll', pos)
      })
    }
  })

  onUnmounted(() => {
    scroll.value.destroy()
  })

  onActivated(() => {
    scroll.value.enable()
    scroll.value.refresh()
  })

  onDeactivated(() => {
    scroll.value.disable()
  })

  return scroll
}

组件使用：

    class="recommend-content">
      

        
class="slider-wrapper">
          
class="slider-content">
            if="sliders.length" :sliders="sliders">
          
        
        
class="recommend-list">
          
class="list-title" v-show="!loading">热门歌单推荐
          

            <li
              v-for="item in albums"
              class="item"
              :key="item.id"
              @click="selectItem(item)"
            >
              
class="icon">
                "60" height="60" v-lazy="item.pic">
              
              
class="text">
                
class="name">
                  {{ item.username }}
                
                
class="title">
                  {{item.title}}