总结better-scroll插件的使用

在html文件中使用

1. 先下载better-scroll / 引用

<script src="https://cdn.bootcdn.net/ajax/libs/better-scroll/2.4.1/better-scroll.js"></script>

2. 设置html结构

<div class="wrapper">
        <ul class="content">
            <li>测试1</li>
            <li>测试2</li>
            <li>测试3</li>
            <li>测试4</li>
            <li>测试5</li>
            <li>测试6</li>
            <li>测试7</li>
            <li>测试8</li>
            <li>测试9</li>
            <li>测试10</li>
            <li>测试11</li>
            <li>测试12</li>
            <li>测试13</li>
            <li>测试14</li>
            <li>测试15</li>
            <li>测试16</li>
            <li>测试17</li>
            <li>测试18</li>
            <li>测试19</li>
            <li>测试20</li>
        </ul>
    </div>

*外层只能对应一个子元素，其余的子元素会失效 *

3. 对应的css

 /* 给外层元素设置固定的高度 */
        .wrapper {
            height: 400px;
            border: 1px solid #000;
            overflow: hidden;
        }

必定要给给外层元素设置高度，不然也会失效

4. 创建BScroll对象

const BS = new BScroll(document.querySelector(".wrapper"))

第一个参数是生效的外层元素，第二参数是相应的配置项,

在vue脚手架中使用

1. npm下载

npm install better-scroll -S

2. 将其封装进一个组件

<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>
<script>
// 引入better-scroll插件
import BScroll from "better-scroll";
export default {
  mounted() {
    this.scroll = new BScroll(this.$refs.wrapper, {
      // 0,1不监测滑动的位置
      // 2 检测手指滑动时的位置
      // 3 监视滑动位置，包括手指离开的惯性滑动
      probeType: this.probeType,
      // 上拉加载更多
      pullUpLoad: this.pullUpLoad,
      // 开启div点击
      click: true,
      observeImage: true,
    });
    this.scroll.on("scroll", (position) => {
      this.$emit("scrollPx", position);
    });
    this.scroll.on("pullingUp", () => {
      this.$emit("pullingUp");
    });
  },
};
</script>

封装组件在html结构需要注意是 ，最外层wrapper，子元素是content，content下才是插槽

一般是在mounted函数下创建bscroll对象，
第一个参数是要生效的父元素，在vue中使用ref
因为使用querySelector获取dom元素很可能会与其他使用改组件的组件中类名冲突
第二参数则是相应的配置项
click开启，因为bscroll默认关闭原生浏览器的点击事件
probeType:0,1 不会开启滑动位置的监测，2开启手指滑动位置的监测，3开启滑动惯性的监测
pullUpLoad 则是 是否开启上拉事件，当触底上拉就能配合pullingUp来返回回调函数

2. 在组件中使用
   引入

import Scroll from "@/components/common/scroll/Scroll.vue";

注册

components: {   Scroll,
  },

使用

  <scroll class="bscroll" ref='scroll'>
  //这里包裹滑动生效区
  //可以有无数多子元素,因为在插件组件中已经设置好了俩父元素
  </scroll>

一般是在使用插件组件中设置css高度，更加灵活

.bscroll{
	position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
}

我学习到了什么？

1. ref
   给普通元素标签加上ref，获取的是该元素
   给组件标签加上的ref，获取到的是组件对象，并不是better-scroll插件本身
2. 封装的思想