Vue 使用better-scroll 上拉刷新，下拉加载_vue 上滑翻页,下拉刷新

当 better-scroll 遇见 Vue - 知乎

Vue中引入better-scroll - 简书

基于better-scroll实现移动端vue上拉加载下拉刷新 - 简书

better-scroll&vue实现上拉加载更多下拉刷新_inyiyi的博客-CSDN博客_vue下拉加载更多

better-scroll.js文档_汇而不置的博客-CSDN博客_better-scroll文档

Vue pc端下拉加载更多

Vue自定义指令实现pc端加载更多 - wmui - 博客园

vue实现pc端无限加载功能 - wmui - 博客园

<template>
  <div class="tabbar">
    <div class="wrapper" ref="wrapper">
      <div class="bscroll-container">
        <!-- 刷新提示信息 -->
        <div class="top-tip">
          <span class="refresh-hook">{{ pulldownMsg }}</span>
        </div>
        <!-- 内容列表 -->
        <ul class="content">
          <li v-for="(item, i) in data" :key="i">{{ item }}</li>
        </ul>
        <!-- 底部提示信息 -->
        <div class="bottom-tip">
          <span class="loading-hook">{{ pullupMsg }}</span>
        </div>
      </div>
    </div>
 
    <!-- alert提示刷新成功 -->
    <div class="alert-hook" :style="{ display: alertHook }">刷新成功</div>
  </div>
</template>
 
<script>
import BScroll from "better-scroll";
export default {
  data() {
    return {
      data: [0, 1, 2, 3, 4, 5, 6],
      pulldownMsg: "下拉刷新",
      pullupMsg: "加载更多",
      alertHook: "none",
      count: 1,
    };
  },
  created() {
    const that = this;
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {
        //初始化better-scroll
        probeType: 1, //1 滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发scroll事件，不会截流。 3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
        click: true, //是否派发click事件
      });
      // 滑动过程中事件
      this.scroll.on("scroll", (pos) => {
        if (pos.y > 30) {
          this.pulldownMsg = "释放立即刷新";
        }
      });
      //滑动结束松开事件
      this.scroll.on("touchEnd", (pos) => {
        //上拉刷新
        if (pos.y > 30) {
          setTimeout(() => {
            that.getData().then((res) => {
              //刷新数据
              that.data = res;
              //恢复刷新提示文本值
              that.pulldownMsg = "下拉刷新";
              //刷新成功后提示
              that.refreshalert();
              //刷新列表后，重新计算滚动区域高度
              that.scroll.refresh();
            });
          }, 1500);
        } else if (pos.y < this.scroll.maxScrollY - 30) {
          //下拉加载
          this.pullupMsg = "加载中。。。";
          setTimeout(() => {
            that.getData().then((res) => {
              //恢复文本值
              that.pullupMsg = "加载更多";
              that.data = this.data.concat(res);
              that.scroll.refresh();
            });
          }, 1500);
        }
      });
    });
  },
  mounted() {
    let wrapper = document.querySelector(".wrapper");
    let scroll = new BScroll(wrapper, {
      scrollY: true,
      click: true,
      probeType: 2, //实时获取滚动坐标位置
    });
  },
  methods: {
    getData() {
      return new Promise((resolve) => {
        //模拟数据请求
        setTimeout(() => {
          const arr = [];
          for (let i = 0; i < 20; i++) {
            arr.push(this.count++);
          }
          resolve(arr);
        }, 1000);
      });
    },
    refreshalert() {
      //刷新成功提示
      this.alertHook = "block";
      setTimeout(() => {
        this.alertHook = "none";
      }, 1000);
    },
  },
};
</script>
 
<style lang="" scoped>
.wrapper {
  width: 100%;
  height: 300px;
  background: #ccc;
  overflow: hidden;
  position: relative;
}
 
li {
  line-height: 50px;
  border-bottom: 1px solid #ccc;
  text-align: center;
}
 
/* 下拉、上拉提示信息 */
.top-tip {
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #555;
}
 
.bottom-tip {
  width: 100%;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #777;
  background: #f2f2f2;
  position: absolute;
  bottom: -35px;
  left: 0;
}
 
/* 全局提示信息 */
.alert-hook {
  display: none;
  position: fixed;
  top: 62px;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #fff;
  font-size: 12px;
  background: rgba(7, 17, 27, 0.5);
}
</style>