使用better-scroll（封装组件---可上拉、下拉和使用

<template>
<div class="pulling-up-down-scroll" ref="dataListRef">
  <div class="pulling-up-down-scroll__">
    <slot></slot>
  </div>
</div>
</template>
<script lang='ts' setup>
import { ref, onMounted,onUpdated,nextTick } from 'vue';
import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'
import PullDown from '@better-scroll/pull-down'
import MouseWheel from '@better-scroll/mouse-wheel'

BScroll.use(MouseWheel)
BScroll.use(PullDown)
BScroll.use(Pullup)

const emits = defineEmits(['on-pulling-up','on-pulling-down'])

// 上拉-下一页
const pullingUpHandler = async () => {
  await emits('on-pulling-up')
  dataListScroll.value.finishPullUp()
  dataListScroll.value.refresh()
}

// 下拉刷新
const pullingDownHandler = async () => {
  await emits('on-pulling-down')
  dataListScroll.value.finishPullDown()
  dataListScroll.value.refresh()
}
let dataListRef = ref()
let dataListScroll= ref()

const getDataListScrollRef = () => {
  return dataListScroll.value
}

onUpdated(() => {
  refreshScroll()
})

const refreshScroll = () => {
  nextTick(() => {
    dataListScroll.value?.refresh()
  })
}

onMounted(async () => {
  nextTick(() => {
    dataListScroll.value = new BScroll(dataListRef.value,{
      scrollY: true,
      mouseWheel: true,
      scrollbar: true,
      pullDownRefresh: true,
      pullUpLoad: true,
    })
    dataListScroll.value.on('pullingUp', pullingUpHandler)
    dataListScroll.value.on('pullingDown', pullingDownHandler)
  })
})

defineExpose({ getDataListScrollRef })
</script>
<style scoped lang='scss'>
.pulling-up-down-scroll {
  width: 100%;
  height: 100%;
  font-size: 13px;
  overflow: hidden;
  .pulling-up-down-scroll__ {
    width: 100%;
    height: auto;
  }

}
</style>