BetterScroll的说明与使用

喜欢ヅ旅行 2023-05-21 05:59 26阅读 0赞

# 一、BetterScroll的下载 #

### ①、可以直接到github上面下载 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]

### ②、也可以在脚手架命令安装 ###

npm install better-scroll --save

具体内容也可参考[**这里**][Link 1]

# 二、BetterScroll的基本使用 #

/*导入BetterScroll*/
    import BScroll from 'better-scroll';
    /*在Vue里面的mounted使用BetterScroll*/
    …… mounted() { 
      this.scroll = new BScroll('.wrapper')
    }
    ……
    
    /*CSS*/
    .wrapper { 
      height: 150px;
      background-color: red;
      overflow: hidden;
    }
    
    /*组件*/
    <div class="wrapper">
      <ul class="content">
        <li>wwwww1</li>
        <li>wwwww2</li>
        <li>wwwww3</li>
        <li>wwwww4</li>
        <li>wwwww5</li>
        <li>wwwww6</li>
        <li>wwwww7</li>
        <li>wwwww8</li>
        <li>wwwww9</li>
        <li>wwwww10</li>
        <li>wwwww11</li>
        <li>wwwww12</li>
        <li>wwwww13</li>
      </ul>
    </div>

# 三、滚动监听 #

/* * 在默认情况下BetterScroll是不可以实时监听滚动的，但我们可以利用他的属性来达到实时监听的目的（probeType） * 0：为probeType的默认值，不会进行实时监听 * 1：不会进行实时监听 * 2：只在手指滚动的时候侦测，在手指离开屏幕后的惯性滚动过程则不会侦测 * 3：只要是滚动就可以侦测 */
    
    mounted() { 
      const scroll = new BScroll('.wrapper', { 
        probeType: 3				/*设置实时监听*/
      });
      scroll.on('scroll', (event) => console.log(event))	/*实时监听*/
      /*且event为对象*/
    }

**结果：**  
![在这里插入图片描述][20200505192153787.png]

# 四、点击事件可能会失效 #

/* BetterScroll 默认会阻止浏览器的原生click 事件，当click设置为true时，则可以进行事件监听 */
    const scroll = new BScroll('.wrapper', { 
      probeType: 3,
      click: true
    });

对**button**不会失效，对**div**会失效

# 五、上拉加载 #

const scroll = new BScroll('.wrapper', { 
      probeType: 3,
      pullUpLoad: true
    }); scroll.on('pullingUp', () => { 			/*下拉加载事件*/
      ……
      scroll.finishPullUp();				/*必须有，如果没有就只能进行一次下拉加载*/
    })

# 六、refresh() #

作用：**当加载完内容的时候，需要重新计算 better-scroll里面的内容高（宽）度**，**应用于当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常（以免出现BUG）。**

# 七、BetterScroll的简单封装 #

/*简单封装组件*/
    <template>						
      <div ref="wrapper">				/*外层，并用ref来标记该div*/
        <div>							/*内层（只能有一个）*/
          <slot></slot>					/*内层的内容*/
        </div>
      </div>
    </template>
    
    <script>
      import BScroll from 'better-scroll';		/*导入*/
      
      export default { 
        name: 'Scroll', data() { 
          return { 
            scroll: null						/*保存scroll对象*/
          }
        }, props: { 
          probeType: { 							/*可动态设定scroll的probeType属性，利于扩展*/
            type: Number,
            default: 0
          }, pullUpLoad: { 							/*可动态设定scroll的pullUpLoad属性，利于扩展*/
            type: Boolean,
            default: false
          }
        }, mounted() { 
          this.scroll = new BScroll(this.$refs.wrapper, { 		/*在挂载完的时候实例化scroll对象并赋值， 注意这里的this.$refs.wrapper的目的是为了获得scroll的外层div对象，这里用class或者id来都不太合适*/
            probeType: this.probeType,						/*设置属性*/
            pullUpLoad: this.pullUpLoad,
            click: true
          }); this.scroll.on('scroll', (e) => { 
            this.$emit('position', e);				/*当发生滚动时，发送事件*/
          }); this.scroll.on('pullingUp', () => { 
            this.$emit('pullUp');					/*当发生下拉加载时，发送事件*/
            this.scroll.refresh();					/*当加载完内容的时候，需要重新计算 better-scroll，以免出现bug*/
            this.scroll.finishPullUp();				/*必须有该语句，没有就无法进行多次刷新*/
          })
        }, methods: { 
          scrollTo(x, y, time = 500) { 				/*scrollTo的方法包装，time默认为500*/
            this.scroll && this.scroll.scrollTo(x, y, time);
          }
          
        }
      }
    </script>
    
    <style scoped lang = "scss">
    </style>

# 八、BetterScroll的1.x与2.x的区别 #

**来自官网**

> BetterScroll 2.X 里面，我们将 1.X 耦合的 feature 拆分至插件，以达到按需加载、减少包体积的目的。因此，@better-scroll/core 只提供了最核心的滚动能力。如果想要实现上拉刷新、下拉加载的功能，你需要使用对应的插件。

BetterScroll的2.x是1.x的精简版，他可以通过plugin来达到需要实现的功能

本文只用于个人学习与记录

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]: /images/20230521/2c2859603736451bb020c3925507ce96.png
[Link 1]: https://github.com/ustbhuangyi/better-scroll/blob/master/README_zh-CN.md
[20200505192153787.png]: /images/20230521/badc01ec87e344dabd46ff43ba6c3ace.png