使用 better-scroll 如何实现滚动功能

最新推荐文章于 2024-06-17 18:01:15 发布

xianshengwen

最新推荐文章于 2024-06-17 18:01:15 发布

阅读量3.3k

点赞数 2

分类专栏： Vue 文章标签： better-scroll的横纵向滚动的实现 better-scroll better-scroll的如何实现滚动效果移动端滚动列表

本文链接：https://blog.csdn.net/weixin_44227577/article/details/91990018

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

@TOCbetter-scroll的横纵向滚动

better-scroll 横纵向滚动的实现

在我们开发移动端的日常工作中, 有时候需要实现一些滚动列表效果, 这时候我们就可以使用 better-scroll 这个插件了, 以下就是 better-scroll 的一些用法

第一步: 安装 better-scroll 插件

   npm install better-scroll --save  ||  yarn add better-scroll

安装完成后, 我们可以到 package.json 文件夹去看 better-scroll 是否已经安装完成了

第二步: 引入 better-scroll 插件

这时候我们只需要在我们需要实现滚动效果的文件引入 better-scroll 这个插件了

   /* 引入插件 */
   import BScroll from 'better-scroll'

当我们使用 better-scroll 的使用我们可以让这个插件在 mounted 这个生命周期里面调用, 因为当执行到 mounted 这个函数的时候页面的 DOM元素 也就加载完毕了, 这个时候我们使用 better-scroll 就不会出现一些不必出现的问题

第三步: 使用 better-scroll 实现横行滚动的效果

首先我们需要编写一段HTML的代码


<template>
 <div>
   <!-- 横向滚动 -->
   <div class="rampageScroll" ref="rampage">
     <ul class="rampage-wrapper" ref="rampageChild">
       <li class="rampage-list">
         <img src="http://img4.imgtn.bdimg.com/it/u=1758562306,2241758388&fm=26&gp=0.jpg" alt="">
       </li>
       <li class="rampage-list">
         <img src="http://img0.imgtn.bdimg.com/it/u=1756633021,617129201&fm=26&gp=0.jpg" alt="">
       </li>
       <li class="rampage-list">
         <img src="http://img4.imgtn.bdimg.com/it/u=1758562306,2241758388&fm=26&gp=0.jpg" alt="">
       </li>
       <li class="rampage-list">
         <img src="http://img3.imgtn.bdimg.com/it/u=218156381,2614790938&fm=26&gp=0.jpg" alt="">
       </li>
       <li class="rampage-list">
         <img src="http://img1.imgtn.bdimg.com/it/u=1207744308,1078557559&fm=26&gp=0.jpg" alt="">
       </li>
       <li class="rampage-list">
         <img src="http://img5.imgtn.bdimg.com/it/u=2670758158,1943306213&fm=26&gp=0.jpg" alt="">
       </li>
       <li class="rampage-list">
         <img src="http://img0.imgtn.bdimg.com/it/u=3212600922,2320351342&fm=26&gp=0.jpg" alt="">
       </li>
       <li class="rampage-list">
         <img src="http://img3.imgtn.bdimg.com/it/u=3483991483,3750476772&fm=26&gp=0.jpg" alt="">
       </li>
       <li class="rampage-list">
         <img src="http://img3.imgtn.bdimg.com/it/u=197379223,2196165770&fm=26&gp=0.jpg" alt="">
       </li>
       <li class="rampage-list">
         <img src="http://img5.imgtn.bdimg.com/it/u=2810560098,4036239675&fm=26&gp=0.jpg" alt="">
       </li>
     </ul>
   </div>
 </div>
</template>

以上的代码中我已经搭建好了一段用来测试的HTML代码了

接下来我们来编写一些简单的样式


* {
  padding: 0;
  margin: 0;
}
.rampageScroll {
  overflow: hidden;
}
.rampage-wrapper {
  background: #fff;
  display: flex;
  white-space: nowrap;
}
.rampage-list {
  list-style: none;
  display: inline-block;
  padding-left: 10px;
  padding-bottom: 15px;
  text-align: center;
}
.rampage-list img {
  width: 150px;
  height: 150px;
}

页面的结构已经搭建好了现在我们需要开始使用 Better-scroll 了


<script>
  // 引入 better-scroll 插件
  import BScroll from "better-scroll";
</script>

在 mounted 函数中定义二个方法


  mounted() {
    /**
     * 横向滚动
     */
    // 第一种方法
    // this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染
    this.$nextTick(() => {
      // 初始化
      this._initScroll();
      // 计算宽度
      this._calculateWidth();
    });
  }

上面的 mounted 函数中我分别定义了: 初始化 better-scroll 的函数、用来计算标签的宽度的方法;

使用在 mounted 里面定义的方法


  methods: {
    // 初始化
    _initScroll() {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.rampage, {
          startX: 0,
          click: true,
          scrollX: true,
          // 忽略竖直方向的滚动
          scrollY: false,
          eventPassthrough: "vertical"
        });
      } else {
        this.scroll.refresh();
      }
    },

    // 计算宽度
    _calculateWidth() {
      // 获取类名为 rampage-list 的标签
      let rampageList = this.$refs.rampageChild.getElementsByClassName("rampage-list");
      // 设置一个起始宽度
      let initWidth = 0;
      // 遍历标签
      for (let i = 0; i < rampageList.length; i++) {
        const item = rampageList[i];
        // 将每一个标签宽度相加
        initWidth += item.clientWidth;
      }
      // 设置可滚动的宽度
      this.$refs.rampageChild.style.width = `${initWidth}px`;
    }
  }

到了这里 better-scroll 实现横行滚动的方法已经完成了

下面就是实现 better-scroll 横向滚动的完整代码了


<template>
  <div>
    <!-- 横向滚动 -->
    <div class="rampageScroll" ref="rampage">
      <ul class="rampage-wrapper" ref="rampageChild">
        <li class="rampage-list">
          <img src="http://img4.imgtn.bdimg.com/it/u=1758562306,2241758388&fm=26&gp=0.jpg" alt="">
        </li>
        <li class="rampage-list">
          <img src="http://img0.imgtn.bdimg.com/it/u=1756633021,617129201&fm=26&gp=0.jpg" alt="">
        </li>
        <li class="rampage-list">
          <img src="http://img4.imgtn.bdimg.com/it/u=1758562306,2241758388&fm=26&gp=0.jpg" alt="">
        </li>
        <li class="rampage-list">
          <img src="http://img3.imgtn.bdimg.com/it/u=218156381,2614790938&fm=26&gp=0.jpg" alt="">
        </li>
        <li class="rampage-list">
          <img src="http://img1.imgtn.bdimg.com/it/u=1207744308,1078557559&fm=26&gp=0.jpg" alt="">
        </li>
        <li class="rampage-list">
          <img src="http://img5.imgtn.bdimg.com/it/u=2670758158,1943306213&fm=26&gp=0.jpg" alt="">
        </li>
        <li class="rampage-list">
          <img src="http://img0.imgtn.bdimg.com/it/u=3212600922,2320351342&fm=26&gp=0.jpg" alt="">
        </li>
        <li class="rampage-list">
          <img src="http://img3.imgtn.bdimg.com/it/u=3483991483,3750476772&fm=26&gp=0.jpg" alt="">
        </li>
        <li class="rampage-list">
          <img src="http://img3.imgtn.bdimg.com/it/u=197379223,2196165770&fm=26&gp=0.jpg" alt="">
        </li>
        <li class="rampage-list">
          <img src="http://img5.imgtn.bdimg.com/it/u=2810560098,4036239675&fm=26&gp=0.jpg" alt="">
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// 引入插件
import BScroll from "better-scroll";

export default {
  name: "Detter",
  methods: {
    // 初始化
    _initScroll() {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.rampage, {
          startX: 0,
          click: true,
          scrollX: true,
          // 忽略竖直方向的滚动
          scrollY: false,
          eventPassthrough: "vertical"
        });
      } else {
        this.scroll.refresh();
      }
    },

    // 计算宽度
    _calculateWidth() {
      // 获取类名为 rampage-list 的标签
      let rampageList = this.$refs.rampageChild.getElementsByClassName("rampage-list");
      // 设置一个起始宽度
      let initWidth = 0;
      // 遍历标签
      for (let i = 0; i < rampageList.length; i++) {
        const item = rampageList[i];
        // 将每一个标签宽度相加
        initWidth += item.clientWidth;
      }
      // 设置可滚动的宽度
      this.$refs.rampageChild.style.width = `${initWidth}px`;
    }
  },

  mounted() {
    /**
     * 横向滚动
     */
    // 第一种方法
    // this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染
    this.$nextTick(() => {
      // 初始化
      this._initScroll();
      // 计算宽度
      this._calculateWidth();
    });
  }
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.rampageScroll {
  overflow: hidden;
}
.rampage-wrapper {
  background: #fff;
  display: flex;
  white-space: nowrap;
}
.rampage-list {
  list-style: none;
  display: inline-block;
  padding-left: 10px;
  padding-bottom: 15px;
  text-align: center;
}
.rampage-list img {
  width: 150px;
  height: 150px;
}
</style>

在这里插入图片描述

下面就是实现 better-scroll 纵向滚动的完整代码了

  
<template>
  <div ref="wrapper" class="scroll">
    <ul>
      <li class="rampage-list">
        <img src="http://img4.imgtn.bdimg.com/it/u=1758562306,2241758388&fm=26&gp=0.jpg" alt="">
      </li>
      <li class="rampage-list">
        <img src="http://img0.imgtn.bdimg.com/it/u=1756633021,617129201&fm=26&gp=0.jpg" alt="">
      </li>
      <li class="rampage-list">
        <img src="http://img4.imgtn.bdimg.com/it/u=1758562306,2241758388&fm=26&gp=0.jpg" alt="">
      </li>
      <li class="rampage-list">
        <img src="http://img3.imgtn.bdimg.com/it/u=218156381,2614790938&fm=26&gp=0.jpg" alt="">
      </li>
      <li class="rampage-list">
        <img src="http://img1.imgtn.bdimg.com/it/u=1207744308,1078557559&fm=26&gp=0.jpg" alt="">
      </li>
      <li class="rampage-list">
        <img src="http://img5.imgtn.bdimg.com/it/u=2670758158,1943306213&fm=26&gp=0.jpg" alt="">
      </li>
      <li class="rampage-list">
        <img src="http://img0.imgtn.bdimg.com/it/u=3212600922,2320351342&fm=26&gp=0.jpg" alt="">
      </li>
      <li class="rampage-list">
        <img src="http://img3.imgtn.bdimg.com/it/u=3483991483,3750476772&fm=26&gp=0.jpg" alt="">
      </li>
      <li class="rampage-list">
        <img src="http://img3.imgtn.bdimg.com/it/u=197379223,2196165770&fm=26&gp=0.jpg" alt="">
      </li>
      <li class="rampage-list">
        <img src="http://img5.imgtn.bdimg.com/it/u=2810560098,4036239675&fm=26&gp=0.jpg" alt="">
      </li>
    </ul>
  </div>
</template>

<script>
// 第一种方案(原生)
import BScroll from "better-scroll";
export default {
  // mounted: 生命周期的结束
  mounted() {
    this.$nextTick(() => {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.wrapper, {
          probeType: 3,
          // 允许使用点击事件
          click: false,
          // 允许上拉加载
          pullUpLoad: {
            threshold: -10
          },
          // 允许下拉加载
          pullDownRefresh: {
            threshold: 100,
            stop: 0
          },
          scrollbar: {
            fade: false,
            interactive: true // 1.8.0 新增
          }
        });
        this.scroll.on("scroll", position => {
          // console.log(position)
        });
        this.scroll.on("pullingDown", () => {
          console.log("下拉加载");
        });
        this.scroll.on("pullingUp", () => {
          console.log("加载更多");
          // 可以加载多次
          this.scroll.finishPullUp();
        });
      } else {
        this.scroll.refresh();
      }
    });
  }
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.scroll {
  overflow: hidden;
  margin-top: 30px;
  height: 100vh;
}

.rampage-list img{
  width: 100%;
  height: 300px;
}
</style>

` 在这里插入图片描述

xianshengwen

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
使用 better-scroll 如何实现滚动功能

@TOCbetter-scroll的横纵向滚动better-scroll 横纵向滚动的实现在我们开发移动端的日常工作中, 有时候需要实现一些滚动列表效果, 这时候我们就可以使用 better-scroll 这个插件了, 以下就是 better-scroll 的一些用法第一步: 安装 better-scroll 插件 npm install better-scroll --save |...
复制链接

扫一扫

专栏目录