Better-Scroll在Vue中的使用

1、滚动原理

父容器wrapper固定高度，子元素content高度大于父容器才能滚动

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
</div>

2、使用步骤

（1）安装better-scroll

cnpm install better-scroll -S

 （2）在组件中引入插件

import BScroll from "better-scroll"

 （3）页面中使用

• DOM结构要求外层wrapper，里层content
• 初始化BScroll的类时机很重要，否则会造成不能滚动，所以在初始化时可以用$nextTick()包裹一下
• 父元素必须有高度且，有overflow: hidden属性，以上三个条件缺一不可

<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(() => {
        this.scroll = new Bscroll(this.$refs.wrapper, {})
      })
    }
  }
</script>
<style lang="scss" scoped>
.wrapper {
    overflow: hidden;
    height: 500px;
}
</style>

如果切换机型才能滚动，设置 observeDOM: true 就可以了

this.scroll = new BScroll(this.$refs.search, {
	observeDOM: true
})

当 better-scroll 遇见 Vue_慕课手记