soc_app/src/components/scroll/scroll.vue

<template>
  <div ref="scrollWrapper"  class="scroll-wrapper">
    <div ref="scrollContent" class="scroll-content">
      <!-- 这里放置你的内容，例如下拉刷新和上拉加载的内容 -->
      <!-- 下拉刷新区域 -->
      <div v-if="pullupDown" class="refresh-wrapper">
          {{ refreshText }}
      </div>

      <!-- 内容区域 -->
      <div class="list-content">
        <slot></slot>
      </div>

      <!-- 上拉加载更多区域 -->
      <div v-if="showLoadMoreText" class="load-more-wrapper">
        <div class="load-more-indicator">
          {{ loadMoreText }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'
import PullDown from '@better-scroll/pull-down'
import ObserveDOM from '@better-scroll/observe-dom'
BScroll.use(Pullup);
BScroll.use(PullDown);
BScroll.use(ObserveDOM);
export default {
  props: {
    //开启下拉刷新
    pullupDown: {
      type: Boolean,
      default: true,
    },
    //开启上拉加载更多
    pullup: {
      type: Boolean,
      default: true,
    },
    //下拉刷新回调函数
    pullupDownFn: {
      type: Function,
      default: () => {},
    },
    //上拉加载更多回调函数
    pullupFn: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      bs: null, // better-scroll 实例
      isRefreshing: false, // 是否正在刷新
      isLoadingMore: false, // 是否正在加载更多
      showLoadMoreText: false, // 是否显示加载更多
      refreshText: '下拉刷新', // 刷新文本
      loadMoreText: '加载更多', // 加载更多文本
      pullupUp: true, // 是否可以上拉加载更多
    };
  },
  mounted() {
    // 初始化 better-scroll
    this.initScroll();
    //window.addEventListener('focusout', focusoutFunc);
    // let _that = this;
    // function focusoutFunc (){
    //   alert(JSON.stringify( _that.refresh()));
    //   _that.refresh();
    // }
  },
  watch: {
    pullup: {
      handler(val) {
        console.log('状态改变',val)
        this.pullupUp = val
      },
      immediate: true
    },
  },
  methods: {
    // 初始化 better-scroll
    initScroll() {
      console.log('初始化滚动组件')
      let el = this.$refs.scrollWrapper;
      this.bs = new BScroll(el, {
        probeType: 3, //1: 每隔一定时间派发scroll事件 2:手指按住屏幕时派发scroll事件 3: 任何滚动时派发scroll事件
        click: true, // 允许点击
        observeDOM: true,
        pullDownRefresh: {
          threshold: 50, // 下拉刷新的触发距离
        },
        pullUpLoad: {
          threshold: -50, // 上拉加载的触发距离
        },
      });
      console.log(this.bs,'初始化成功')
      // 监听下拉刷新事件
      this.bs.on('pullingDown', this.pullingDownHandler);
      // 监听上拉加载事件
      this.bs.on('pullingUp', this.pullingUpHandier);
      // better-scroll 初始化完成后，刷新 scroll
      this.$nextTick(()=>{
        this.bs.refresh();
      })
    },
    /** 手动刷新容器高度，使用时最好在nextTick函数中或者异步调用,hasVerticalScroll可以判断组件能否滚动*/
    refresh() {
      setTimeout(() => {
        console.log('刷新滚动容器')
        this.bs.finishPullUp(); //  加载更多完成
        this.bs.refresh();
      },500);
    },
    // 下拉刷新
    async pullingDownHandler(){
      console.log('下拉刷新')
      if(this.pullupDown) {
        this.isRefreshing = true;
        this.refreshText = '正在刷新';
        this.$emit('refresh');
        // 这里可以执行刷新操作，例如发送请求获取数据
        await this.downFn();
        // 刷新完成后，调用 this.refreshFinish() 结束刷新
        setTimeout(() => {
          this.refreshFinish();
        }, 500);
      }else {
        setTimeout(() => {
          this.refreshFinish();
        }, 300);
      }
    },
    // 上拉加载
    async pullingUpHandier(){
      console.log(this.pullupUp,'pullingUp2')
      if(this.pullupUp) {
        this.showLoadMoreText = true;
        //this.loadMoreText = '正在加载...';
        this.$emit('loadMore');
        await this.upFn();
        // 加载完成后，调用 this.loadMoreFinish() 结束加载更多
        setTimeout(()=>{
          this.loadMoreFinish();
        },500)
      }else {
        setTimeout(() => {
          this.loadMoreFinish();
        }, 300);
      }
    },

    async downFn(){
      await this.pullupDownFn();
    },

     async upFn(){
      await this.pullupFn();
    },

    // 结束下拉刷新
    refreshFinish() {
      console.log('更新容器高度');
      this.refreshText = '下拉刷新';
      this.bs.finishPullDown(); //  刷新完成
      this.bs.refresh(); // 重新计算高度
    },

    // 结束上拉加载更多
    loadMoreFinish() {
      //this.loadMoreText = '加载更多';
      this.showLoadMoreText = false;
    },
  },
  beforeDestroy() {
    // 销毁 better-scroll
    this.bs.destroy();
    this.bs = null;
    console.log(this.bs,'销毁')
  },
};
</script>

<style lang="scss" scoped>
.scroll-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.scroll-content {
  position: absolute;
  width: 100%;
}

.refresh-wrapper {
  position: absolute;
  top: -80px;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 80px;
  line-height: 80px;
  font-size: 28px;
  color: #666;
}

.load-more-wrapper {
  text-align: center;
  height: 80px;
  line-height: 80px;
  font-size: 28px;
  color: #666;
}


</style>