better-scroll移动端滚动插件的使用

首先安装插件:2.4.2版本

npm install @better-scroll/core --save

<template>
<div class="wrapper"
         ref="scroll">
      <div class="content"  >
        </div>
  </div>
</template>
<script>   
import BScroll from '@better-scroll/core'
export default {
  mounted () {
    this.init()
  },
  beforeDestroy () {
    this.bs.destroy()
  },
  methods: {
    init () {
      this.bs = new BScroll(this.$refs.scroll, {
        probeType: 3,
        click: true
      })

      this.bs.on('scroll', ({ y }) => {
        console.log(y)
      })
      this.bs.on('scrollEnd', (pos) => {
        console.log(pos)
      })
    },
  }
};
</script>    
<style lang="scss" scoped>
.wrapper {
  height: 90vh;
  position: relative;
  overflow: hidden;
}
</style>

  

posted @ 2021-12-10 13:43  chicidol  阅读(169)  评论(0编辑  收藏  举报