better-scroll简单应用

最近在学习better-scroll,感觉挺强大的。建议配合官方demo和文档一起看,不然晕头转向的!文章的最后是上拉加载和下拉刷新

安装

npm install better-scroll --save
import BScroll from 'better-scroll'

初始化

很多人发现自己引入better-scroll不起作用,这种问题,百度一手一大把,其实是看文档不仔细的原因造成的,下面是vue代码根据这段代码我们来稍微说一下!

 <div id="app" ref="wrapper">
    <div class="content" ref="content">
      <p v-show="isUpLoad">释放更新...</p>
      <p v-for="(item,index) in dataarr" class="p">{{item}}</p>
      <p v-show="isDownLoad">加载中...</p>
    </div>
  </div>

1、wrapper高度必须小于content而且样式中必须得定位

position: absolute;
left: 0;
top: 0;
overflow: hidden;
height: 100%;
width: 100%;

2、必须在dom加载完成后初始化better-scroll(下面是vue的示例)

mounted () {
    let _self = this
    setTimeout(() => {
        _self._initScroll()
    }, 20)

},
methods:{
    _initScroll () {
       this.scroll = new BScroll(_self.$refs.wrapper, options)
    }
}
//options是自己配置的参数
//很多人会以为在vue的$nextTick中初始化也可以,我试了一下不可以

简单实例

我们做一个简单的上拉加载下拉刷新。

<template>
  <div id="app" ref="wrapper">
    <div class="content" ref="content">
      <p v-show="isUpLoad">释放更新...</p>
      <p v-for="(item,index) in dataarr" class="p">{{item}}</p>
      <p v-show="isDownLoad">加载中...</p>
    </div>
  </div>
</template>
<script>
  import BScroll from 'better-scroll'

  export default {
    name: 'app',
    data () {
      return {
        dataarr: ['数据', '数据', '数据', '数据', '数据', '数据', '数据', '数据', '数据', '数据', '数据', '数据', '数据', '数据', '数据'],
        isUpLoad: false,
        isDownLoad: false
      }
    },
    mounted () {
      let _self = this
      setTimeout(() => {
        _self._initScroll()
      }, 20)

    },
    methods: {
      _initScroll () {
        let _self = this
        _self.scroll = new BScroll(_self.$refs.wrapper, {
          probeType: 1,
          pullUpLoad: {
            threshold: 20
          },
          pullDownRefresh: {
            threshold: 30, // 下拉距离超过30px触发pullingDown事件
            stop: -20 // 回弹停留在距离顶部20px的位置
          },
          mouseWheel: {
            speed: 20,
            invert: false,
            easeTime: 300
          }
        })
        _self.scroll.on('scroll', (pos) => {
          if (pos.y > 20) {
            _self.isUpLoad = true
          } else {
            _self.isUpLoad = false
          }
          if (_self.scroll.maxScrollY > pos.y + 10) {
            _self.isDownLoad = true
          } else {
            _self.isDownLoad = false
          }
        })
        _self.scroll.on('pullingDown', (pos) => {
          _self.dataarr = ['我是新数据', '我是新数据', '我是新数据', '我是新数据', '我是新数据', '我是新数据', '我是新数据', '我是新数据', '我是新数据', '我是新数据', '我是新数据', '我是新数据', '我是新数据']
          _self.scroll.finishPullDown()
        })
        _self.scroll.on('pullingUp', (pos) => {
          _self.dataarr.push('加载的数据')
          _self.scroll.finishPullUp()
        })
      },
      refresh () {
        this.scroll && this.scroll.refresh()
      }
    },
    watch: {
      dataarr () {
        setTimeout(() => {
          this.refresh()
        }, 20)
      }
    }
  }
</script>

<style>
  body {
    margin: 0;
    padding: 0;
  }

  p {
    margin: 0;
  }

  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
  }

  .content {
    width: 100%;
  }

  .p {
    width: 100%;
    padding: 50px 0;
  }
</style>