better-scroll初体验

很多人在使用vue-cli开发项目的时候,在涉及到上拉下拉加载事件的时候,很多人会使用better-scroll,出于好奇,写了个小demo来测试了一下。

安装:npm install --save better-scroll

代码如下:

<template>
  <div class="wrapper" ref="wrapper">
    <ul class="content">
      <li v-for="item in 40">{{item}}</li>
    </ul>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
  name: 'hello',
  data () {
    return {

    }
  },
  mounted () {
    let dom = this.$refs.wrapper;
    this.$nextTick(() => {
      this.scroll = new BScroll(dom, {
        scrollY:true,
      })
      this.scroll.on('scrollEnd',(pos) => {
        console.log(pos)
      })
    })
  }
}
</script>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .wrapper{
    width: 100%;
    height: 667px;
  }
</style>

这里要特别注意的是wrapper要设置高度才行,否则不会生效,第一次使用的时候,在这里吃亏了。

原文地址:https://www.cnblogs.com/qiuchuanji/p/8881432.html