vue + BS滚动和下拉刷新 上拉加载更多

vue + BS滚动和下拉刷新 上拉加载更多

• 下载：
  • npm install better-scroll -S
• 引入：
  • import BScroll from 'better-scroll'

<!--  -->
<template>
  <div class="recommend_wrap">
    <!-- <van-loading size="50px">加载中...</van-loading> -->
    <ul class="recommend">
      <li v-for="(item, index) in rightD" :key="index">
        <img :src="item.imgUrl" alt />
        <span>{{ item.title }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);
import BScroll from "better-scroll";
export default {
  name: "Recommend",
  data() {
    return {
      page: 0,
      pageNum: 10,
      rightD: [
        {
          title: "女装",
          imgUrl:
            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
        },
        {
          title: "男装",
          imgUrl:
            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
        },
        {
          title: "女装",
          imgUrl:
            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
        },
        {
          title: "女装",
          imgUrl:
            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
        },
        {
          title: "女装",
          imgUrl:
            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
        },
        {
          title: "男装",
          imgUrl:
            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
        },
        {
          title: "女装",
          imgUrl:
            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
        },
        {
          title: "女装",
          imgUrl:
            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
        },
        {
          title: "女装",
          imgUrl:
            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
        },
        {
          title: "男装",
          imgUrl:
            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
        },
        {
          title: "女装",
          imgUrl:
            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
        },
        {
          title: "女装",
          imgUrl:
            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
        }
      ]
    };
  },
  //应该使用watch监听的 但是由于是死数据，暂时先mounted
  mounted() {
    this.$nextTick(() => {
      this._initBScroll();
    });
  },
  methods: {
    // 操作其他 组件的 使用 _开头
    //1.1：初始化
    _initBScroll() {
      this.listScroll = new BScroll(".recommend_wrap", {
        scrollY: true,
        probeType: 3
      });
      //1.2：监听列表滚动
      this.listScroll.on("touchEnd", pos => {
        //1.2.1 监听下拉 向下拉的时候 是正值 大于50给下拉刷新
        if (pos.y >= 50) {
          console.log("下拉刷新");
          // 需要 page 恢复为0; 然后请求数据
        }
        //1.2.2 监听上拉 y轴的最大滚动距离 this.listScroll.maxScrollY
        if (this.listScroll.maxScrollY > pos.y + 20) {
          console.log("上拉加载更多");
          //对数据的拼接的时候
          // 需要 page +1;
          // 需要 使用 [...原数据，...新数据]
        }
      });
      //1.3：列表滚动结束 重新计算better-scroll的高度
      this.listScroll.on("scrollEnd", () => {
        // Toast.loading({
        //   message: "加载中...",
        //   forbidClick: true
        // });
        this.listScroll.refresh();
      });
    }
  },
  components: {}
};
</script>
<style lang="scss" scoped>
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.recommend_wrap {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .recommend {
    display: flex;
    flex-wrap: wrap;

    li {
      width: 50%;
      height: 150px;
      display: flex;
      flex-direction: column;

      img {
        display: block;
        width: 100%;
        height: 120px;
      }
      span {
        width: 100%;
        height: 20px;
      }
    }
  }
}
</style>