better-scroll的使用

代码：

<template>
  <div id="app">
    <div class="wrapper" ref="wrapper">
      <ul class="content">
       壬戌之秋，七月既望，苏子与客泛舟游于赤壁之下。清风徐来，水波不兴。举酒属客，诵明月之诗，歌窈窕之章。少焉，月出于东山之上，徘徊于斗牛之间。白露横江，水光接天。纵一苇之所如，凌万顷之茫然。浩浩乎如冯虚御风，而不知其所止；飘飘乎如遗世独立，羽化而登仙。
于是饮酒乐甚，扣舷而歌之。歌曰：“桂棹兮兰桨，击空明兮溯流光。渺渺兮予怀，望美人兮天一方。”客有吹洞箫者，倚歌而和之。其声呜呜然，如怨如慕，如泣如诉，余音袅袅，不绝如缕。舞幽壑之潜蛟，泣孤舟之嫠妇。
苏子愀然，正襟危坐而问客曰：“何为其然也？”客曰：“月明星稀，乌鹊南飞，此非曹孟德之诗乎？西望夏口，东望武昌，山川相缪，郁乎苍苍，此非孟德之困于周郎者乎？方其破荆州，下江陵，顺流而东也，舳舻千里，旌旗蔽空，酾酒临江，横槊赋诗，固一世之雄也，而今安在哉？况吾与子渔樵于江渚之上，侣鱼虾而友麋鹿，驾一叶之扁舟，举匏樽以相属。寄蜉蝣于天地，渺沧海之一粟。哀吾生之须臾，羡长江之无穷。挟飞仙以遨游，抱明月而长终。知不可乎骤得，托遗响于悲风。”
苏子曰：“客亦知夫水与月乎？逝者如斯，而未尝往也；盈虚者如彼，而卒莫消长也。盖将自其变者而观之，则天地曾不能以一瞬；自其不变者而观之，则物与我皆无尽也，而又何羡乎！且夫天地之间，物各有主，苟非吾之所有，虽一毫而莫取。惟江上之清风，与山间之明月，耳得之而为声，目遇之而成色，取之无禁，用之不竭，是造物者之无尽藏也，而吾与子之所共适。”
客喜而笑，洗盏更酌。肴核既尽，杯盘狼籍。相与枕藉乎舟中，不知东方之既白。
      </ul>
    </div>
  </div>
</template>

<script>
import BScroll from '@better-scroll/core'

export default {
  name: 'App',
  mounted() {
    this.$nextTick(() => {
      let bs = new BScroll(this.$refs.wrapper, {
      click: true
    })
    })
  }
}
</script>

<style scoped>
  .wrapper {
    height: 100vh;
    border: 2px solid red;
    box-sizing: border-box;
    overflow: hidden;
  }
  .content {
    border: 2px solid green;
    height: 900px;
  }
</style>

注意点：

1.外层容器必须给定给高度，并设置overflow: hidden;

2.移动端布局时，要注意box-sizing: border-box;和body自身外边距的影响；

3.钩子函数mounted是在el挂载到实例上后调用，此时DOM开始渲染但仍未渲染；

4.vm.$nextTick：

nextTick接收一个回调函数作为参数，它的作用是将回调延迟到下次DOM更新之后执行；
在这里的作用是确保DOM结构渲染完成从而确保子元素bscroll-container高度计算准确；

一些常用方法：

refresh()：重新计算BetterScroll，当DOM解构发生变化时，确保滚动效果正常；
scrollTo(x, y, time, easing, extraTransform): 滚动到指定位置，time指定动画时间；

一些事件：

refresh：BetterScroll重新计算时触发；

bs.on('refresh', () => {})

scroll: 正在滚动时触发；

bs.on('scroll', (position) => {
      console.log(position.x, position.y);
    })

下面的事件必须注册相应插件才能使用：

pullingDown(pull-down)下拉刷新：

import BScroll from '@better-scroll/core'
import Pulldown from '@better-scroll/pull-down'
//注册插件
BScroll.use(Pulldown)
export default {
  name: 'App',
  mounted() {
    this.$nextTick(() => {
      let bs = new BScroll(this.$refs.wrapper, {
        pullDownRefresh: true
    })
    bs.on('pullingDown', (position) => {
      await fetchData()
      console.log('ddd');
      bs.finishPullDown()
    })
    })
  }
}

pullingUp(pull-up)上拉刷新:

import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'

BScroll.use(Pullup)
export default {
  name: 'App',
  mounted() {
    this.$nextTick(() => {
      let bs = new BScroll(this.$refs.wrapper, {
        pullUpLoad: true
    })
    bs.on('pullingUp', (position) => {
      // await fetchData()异步请求数据
      console.log('ddd');
      bs.finishPullUp()
    })
    })
  }
}