vue之better-scroll详解及封装

　　在我们的h5或移动端网页开发中，常常会需要实现滚动加载数据，等需求，而在开发中原生开发往往会带来意想不到的问题，因此我们引入better-scroll来帮我们实现流畅的滚动效果。

什么是better-scroll

better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。

better-scroll原理

　　先看代码及图片

<div class="wrapper" style='height:300px;'>

  <ul class="content">

    <li>ul被li标签自动撑开，高度不固定</li>

    <li>...</li>

    ...

  </ul>

</div>

　　当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。

better-scroll代码基本介绍

import BScroll from 'better-scroll'

let wrapper = document.querySelector('.wrapper')

let scroll = new BScroll(wrapper, {})

　　首先：引入better-scroll第三方组件

　　其次：获取滚动区域父级Dom元素（固定高度的元素）

　　最后：实例化better-scroll（参数说明：参数1--dom元素，参数2：相关配置）

vue中的better-scroll

　　首先看代码

<template>

  <div class="wrapper" ref="wrapper">

    <ul class="content">

      <li>...</li>

      <li>...</li>

      ...

    </ul>

  </div>

</template>

<script>

  import BScroll from 'better-scroll'

  export default {

    mounted() {

      this.$nextTick(() => {
　　　　　　//省略了获取dom步骤，用this.$refs.wrapper获取dom

        this.scroll = new Bscroll(this.$refs.wrapper, {})

      })

    }

  }

</script>

　　Vue.js 提供了获取 DOM 对象的接口—— vm.$refs。通过了 this.$refs.wrapper访问到了这个 DOM 对象，this.$nextTick 的回调函数中初始化 better-scroll 。

　　this.$nextTick执行的 DOM 已经渲染了确保滚动正常。this.$nextTick 是一个异步函数，底层用到了 MutationObserver 或者是 setTimeout(fn, 0)。其实我们在这里把 this.$nextTick 替换成 setTimeout(fn, 20) 也是可以的（20 ms 是一个经验值，每一个 Tick 约为 17 ms）

better-scroll 组件的抽象和封装

　　新建scroll.vue

<template>

  <div class="wrap" ref="wrapper">

   <slot>插槽</slot>

  </div>

</template>

<script >

import BScroll from "better-scroll";

export default {

  props: {

    /**

     * 1 滚动的时候会派发scroll事件，会截流。

     * 2 滚动的时候实时派发scroll事件，不会截流。

     * 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件

     */

    probeType: {

      type: Number,

      default: 1,

    },

    /**

     * 点击列表是否派发click事件

     */

    click: {

      type: Boolean,

      default: true,

    },

    /**

     * 是否开启横向滚动

     */

    scrollX: {

      type: Boolean,

      default: false,

    },

    /**

     * 是否派发滚动事件

     */

    listenScroll: {

      type: Boolean,

      default: false,

    },

    /**

     * 列表的数据

     */

    data: {

      type: Array,

      default: null,

    },

    /**

     * 是否派发滚动到底部的事件，用于上拉加载

     */

    pullup: {

      type: Boolean,

      default: false,

    },

    /**

     * 是否派发顶部下拉的事件，用于下拉刷新

     */

    pulldown: {

      type: Boolean,

      default: false,

    },

    /**

     * 是否派发列表滚动开始的事件

     */

    beforeScroll: {

      type: Boolean,

      default: false,

    },

    /**

     * 当数据更新后，刷新scroll的延时。

     */

    refreshDelay: {

      type: Number,

      default: 20,

    },

  },

  mounted() {

    // 保证在DOM渲染完毕后初始化better-scroll

    setTimeout(() => {

      this.initScroll();

    }, 20);

  },

watch: {

    // 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常

    data() {

      setTimeout(() => {

        this.refresh();

      }, this.refreshDelay);

    },

  },

methods: { initScroll() { if (!this.$refs.wrapper) { return; } // better-scroll的初始化 this.scroll = new BScroll(this.$refs.wrapper, { probeType: this.probeType, click: this.click, scrollX: this.scrollX, }); // 是否派发滚动事件 if (this.listenScroll) { this.scroll.on("scroll", (pos) => { this.$emit("scroll", pos); }); } // 是否派发滚动到底部事件，用于上拉加载 if (this.pullup) { this.scroll.on("scrollEnd", () => { // 滚动到底部 if (this.scroll.y <= this.scroll.maxScrollY + 50) { this.$emit("scrollToEnd"); } }); } // 是否派发顶部下拉事件，用于下拉刷新 if (this.pulldown) { this.scroll.on("touchEnd", (pos) => { // 下拉动作 if (pos.y > 50) { this.$emit("pulldown"); } }); } // 是否派发列表滚动开始的事件 if (this.beforeScroll) { this.scroll.on("beforeScrollStart", () => { this.$emit("beforeScroll"); }); } }, disable() { // 代理better-scroll的disable方法 this.scroll && this.scroll.disable(); }, enable() { // 代理better-scroll的enable方法 this.scroll && this.scroll.enable(); }, refresh() { // 代理better-scroll的refresh方法 this.scroll && this.scroll.refresh(); }, scrollTo() { // 代理better-scroll的scrollTo方法 this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments); }, scrollToElement() { // 代理better-scroll的scrollToElement方法 this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments); }, },
  destroyed(){

     this.scroll.destroy()

  },

};

</script>

<style lang='scss' scoped>

</style>

新建index.vue简单去使用他（参数pullup 开启向上滑动）

<template>

  <!-- 封装better-scroll -->

  <Better class="wrapper" :data="data" :pullup="pullup" @scrollToEnd="loadData">

    <ul class="content">

      <li v-for="(item, i) in data" :key="i">{{ item.name }}</li>

    </ul>

  </Better>

</template>

<script>

import Better from "./BetterScrollss";

import { mapState } from "vuex";

export default {

  components: {

    Better,

  },

  data() {

    return {

      data: [],

      pullup: true,

      params: {

        city_id: 0,

        page: 2,

      },

    };

  },

  created() {

    this.loadData();

  },

  computed: {

    ...mapState("index", ["listData", "page"]),

  },

  watch: {

    listData(value) {

      this.params.page = this.page + 1;

      this.data = this.data.concat(value);

    },

  },

  methods: {

    loadData() {

      //请求数据

      this.$store.dispatch("index/requeListData", this.params);

    },

  },

};

</script>

<style lang='scss' scoped>

.content li {

  background: olivedrab;

  margin: 10px;

  height: 50px;

}

.wrap {

  margin-top: 100px;

  height: 250px;

  overflow: hidden;

  background: pink;

}

</style>

实现效果

better-scroll相关参数

　　格式：let scroll= new BScroll(object,{[option1,],.,.});

　　注意，如果在某一个组件内创建了一个BScroll的实例，在组件生命周期结束前要注意调用destroy方法，否则在滑动过程中切换页面会导致一直触发scroll事件，导致一些意想不到的问题，切记！！！(this.scroll.destroy())

option参数

startX: 0 开始的X轴位置
startY: 0 开始的Y轴位置
scrollY: true 滚动方向为 Y 轴
scrollX: true 滚动方向为 X 轴
click: true 是否派发click事件，通常判断浏览器派发的click还是betterscroll派发的click，可以用_constructed，若是bs派发的则为true
directionLockThreshold: 5
momentum: true 当快速滑动时是否开启滑动惯性
bounce: true 是否启用回弹动画效果
selectedIndex: 0 wheel 为 true 时有效，表示被选中的 wheel 索引
rotate: 25 wheel 为 true 时有效，表示被选中的 wheel 每一层的旋转角度
wheel: false 该属性是给 picker 组件使用的，普通的列表滚动不需要配置
snap: false 该属性是给 slider 组件使用的，普通的列表滚动不需要配置
snapLoop: false 是否可以无缝循环轮播
snapThreshold: 0.1 用手指滑动时页面可切换的阈值，大于这个阈值可以滑动的下一页
snapSpeed: 400, 轮播图切换的动画时间
swipeTime: 2500 swipe 持续时间
bounceTime: 700 弹力动画持续的毫秒数
adjustTime: 400 wheel 为 true 有用，调整停留位置的时间
swipeBounceTime: 1200 swipe 回弹时间
deceleration: 0.001 滚动动量减速越大越快，建议不大于0.01
momentumLimitTime: 300 符合惯性拖动的最大时间
momentumLimitDistance: 15 符合惯性拖动的最小拖动距离
resizePolling: 60 重新调整窗口大小时，重新计算better-scroll的时间间隔
preventDefault: true 是否阻止默认事件
preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } 阻止默认事件
HWCompositing: true 是否启用硬件加速
useTransition: true 是否使用CSS3的Transition属性
useTransform: true 是否使用CSS3的Transform属性
probeType: 1 滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发scroll事件，不会截流。 3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件

event事件

beforeScrollStart - 滚动开始之前触发
scrollStart - 滚动开始时触发
scroll - 滚动时触发
scrollCancel - 取消滚动时触发
scrollEnd - 滚动结束时触发
touchend - 手指移开屏幕时触发
flick - 触发了 fastclick 时的回调函数
refresh - 当 better-scroll 刷新时触发
destroy - 销毁 better-scroll 实例时触发

举例：
let scroll = new BScroll(document.getElementById('wrapper'),{

   probeType: 3

})

scroll.on('scroll', (pos) => {

  console.log(pos.x + '~' + pos.y)

})