better-scroll使用（vue2技术栈）

原创

已于 2022-04-08 22:09:38 修改 · 457 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #npm

于 2022-04-06 22:44:00 首次发布

本文介绍了在Vue2项目中使用better-scroll的详细步骤，包括npm下载、组件引入、创建滚动容器、设置数据、初始化better-scroll、优化内存管理以及实现滚动到底部自动加载新数据的功能。

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

npm下载：

npm i -S better-scroll

使用步骤：

(1)引入：

import BSscroll from 'better-scroll'

(2)创建容器 scroll

<div class="scroll" :style="{height: height + 'px'}">
    <ul>
        <li></li>
    </ul>
</div>

(3)创建data数据

data(){
    //默认滚动可视高度
     height:0,
     //节流思想
      filmAddFlag:true,
      //new的BS实例
      bs: null,
      //当前页码
      pageNum: 1,
}

(4)通过获取当前滚动区域：超出部分隐藏（overflow:hidden）

this.height=document.documentElement.clientHeigth

(5)new实例化better-scroll

updated() {
    if (!this.bs) {
      this.bs = new BScroll(".scroll", {
          //激活上滑动的事件监听
        pullUpLoad: true,
        //激活下滑的事件监听
        pullDownRefresh: true,
        //默认情况下使用bs后，它会禁止浏览器的点击事件
        click: true,
        //滚轮事件
        mouseWheel: true,
        //鼠标事件
        disableMouse: false,
        //触摸事件
        disableTouch: false,
      });
      //上滑事件
      this.bs.on("pullingUp", () => {
        // 上滑触底 获取数据拼接
        this.getData();
        this.bs.finishPullUp();
      });
    }else {
      this.bs.refresh(); //就用这个实例 不重新实例
    }
  },

(6)节约内存

 beforeDestroy() {
    // 节约资源
    this.bs = null
 }

(7)每次到底重新获取数据 getData()

//async 与 await配合 可以实现异步数据请求前提 用变量接收
  async getData() {
      console.log("get data");
      if (this.filmAddflag) {
        this.filmAddflag = false;
        this.pageNum++;
        if (this.type == 1) {
          var ret = await nowplayinglistDate(this.pageNum);
        }else{
          var ret = await commingsoonlistDate(this.pageNum);
        }
        if (ret.data.data.films.length <= 0) {
          this.filmAddflag = false;
        } else {
          this.films = this.films.concat(ret.data.data.films);
          this.filmAddflag = true;
        }
      }
    },

全部代码：

<template>
  <div>
    <!-- 第一种做法  利用props传值的length动态判断 -->
    <!-- <div v-if="!listtozi.length">loading.....</div> -->
    <!-- <loading2 v-if="!listtozi.length">  </loading2>
    <div v-if="listtozi.length">
      <div v-for="(item, index) in listtozi" :key="index">
        {
  
  { item.name }} --- {
  
  { item.filmType.name }}
        <img :src="item.poster" alt="" />
      </div>
    </div> -->
    <!-- 第二种做法  利用:key="'film'+list.length" 重走生命周期 动态判断 -->
    <!-- <loading2 v-if="loading"> </loading2>
  &n