Better-Scroll的封装

最新推荐文章于 2023-05-28 11:28:32 发布

原创最新推荐文章于 2023-05-28 11:28:32 发布 · 214 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

前端同时被 3 个专栏收录

62 篇文章

订阅专栏

学习

28 篇文章

订阅专栏

vue

24 篇文章

订阅专栏

本文介绍了一个名为Bettor-Scroll的Vue组件，该组件利用Better Scroll库实现了内容滚动和上拉加载更多功能。组件内部通过监听`pullingUp`事件触发上拉加载，并通过`getMoreData`事件向父组件发送请求获取额外数据。使用时需导入组件、注册并设置固定高度，确保内容高度大于容器高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bettor-Scroll.vue组件

<template>
  <!-- wrapper必须要有高度 -->
  <div class="wrapper">
    <!-- 当 content 的高度不超过父容器的高度，是不能滚动的 -->
    <div class="content">
      <!-- 滚动内容 -->
      <slot></slot>
    </div>
  </div>
</template>


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

export default {
  data() {
    return {
      scroll: null,
    };
  },
  props: {
    probeType: {
      type: Number,
      default: 0,
    },
    pullUpLoad: {
      type: Boolean,
      default: true,
    },
  },
  mounted() {
    this.scroll = new BetterScroll(".wrapper", {
      movable: true,
      zoom: true,
      // 有些情况下某些配置是不需要的，所以不能写死，让使用者传递
      probeType: this.probeType, //是否需要监听滚动 默认值是0不监测，1也是不监测，2是手指在滚动的过程中进行监测，手指离开后就不监测，3，监测滚动的全过程
      pullUpLoad: this.pullUpLoad, //开启滚动条到达底部的事件监听。
      observeDOM: true, //允许滚动
      click: true,
      // 通过observeImage和observeImage可以动态的拓展滚动区域的高度
      observeImage: true, //当检测到图像加载或加载失败时，自动刷新 BetterScroll 的高度。
      keepAlive: true, //自动保存滚动的状态信息
    });

    if (this.pullUpLoad) {
      // 监听滚顶条是否到达底部
      this.scroll.on("pullingUp", () => {
        //监听的事件 pullingUp触发的话，就代表需要拉取更多的数据
        this.$emit("getMoreData");
        console.log("到达底部");
        //此时 上拉加载更多 发送ajax请求，
        /*  setTimeout(() => {
          this.scroll.finishPullUp();
        }, 2000); */
      });
    }
  },
};
</script>

<style>

</style>

2.使用组件

1.导入
import Scroll from "components/common/scroll/Scroll.vue";
2.注册
components: {
    Scroll,
  },
3.使用
<Scroll class="city-list-scroll">
      <ShowListCity
        :hotCityList="hotCityList"
        :showAllCity="showAllCity"
      ></ShowListCity>
    </Scroll>
//注意一定要给Scroll 组件一个固定的高度，并且Scroll 组件内部内容的高度一定要操作Scroll 设置的高度