Vue中使用better-scroll插件实现移动端的上拉加载，下拉刷新。

前言

大家好，我是尤雨海。。。。。。

代码：

<template>
  <div class="wrapper">
    <ul class="content">
      <p style="color: rgb(0, 26, 255); text-align: center" v-show="ispullDown">
        {{ title }}
      </p>
      <li v-for="(item, index) in data" :key="index">这是第{{ item }}条数据</li>
      <p style="color: rgb(0, 26, 255); text-align: center" v-show="ispullUp">
        {{ title }}
      </p>
    </ul>
  </div>
</template>

<script>
import BScroll from "better-scroll";

export default {
  name: "HomeView",
  data() {
    return {
      /* 数据 */
      data: 30,
      /* 提示信息 */
      title: "刷新中，请稍后......",
      /* 控制顶部提示的显示与出现 */
      ispullDown: false,
      /* 控制底部提示的显示与出现 */
      ispullUp: false,
      /* 保存new出来的bscroll实例 */
      bs: null,
    };
  },
  created() {},
  mounted() {
    let wrapper = document.querySelector(".wrapper");
    this.bs = new BScroll(wrapper, {
      /* 配置纵向滚动 */
      scrollY: true,
      /* 配置下拉刷新 */
      pullDownRefresh: {
        threshold: 50,
        stop: 30,
      },
      /* 配置上拉加载 */
      pullUpLoad: {
        threshold: 50,
      },
    });
    /* 下拉刷新事件 */
    this.bs.on("pullingDown", this.pullDown);
    /* 上拉加载事件 */
    this.bs.on("pullingUp", this.pullUp);
  },

  methods: {
    /* 下拉刷新的事件方法 */
    pullDown() {
      this.title = "刷新中，请稍后......";
      this.ispullDown = true;
      /* 模拟请求数据 */
      const time = setTimeout(() => {
        this.title = "加载完成";
        this.bs.finishPullDown();
        this.data = 30;
        this.$nextTick(() => {
          this.bs.refresh();
        });
        const time1 = setTimeout(() => {
          this.ispullDown = false;
          clearTimeout(time);
          clearTimeout(time1);
        }, 1000);
      }, 2000);
    },

    /* 上拉加载的时间方法 */
    pullUp() {
      this.title = "加载，请稍后......";
      this.ispullUp = true;
      this.$nextTick(() => {
        this.bs.refresh();
      });
      /* 模拟请求数据 */
      const time = setTimeout(() => {
        this.title = "加载完成";
        this.bs.finishPullUp();
        this.data += 10;
        this.$nextTick(() => {
          this.bs.refresh();
        });
        this.ispullUp = false;
      }, 2000);
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
}

.wrapper {
  width: 80%;
  height: 95vh;
  margin: 0 auto;
  border: 1px solid black;
  overflow: hidden;
}

.content {
  width: 100%;
  p {
    width: 100%;
    padding: 10px 0;
  }

  li {
    width: 100%;
    padding: 10px 0;
    border: 1px solid #ccc;
  }
}
</style>

附：better-scroll插件官网