better-scroll實現頁面滾動

npm安裝

npm install better-scroll --save

在需要的頁面引入

<script>
import BScroll from 'better-scroll'
export default {
  mounted () {
    // 在dom元素渲染完成之後初始化better-scroll的實例
    const scroll = new BScroll(this.$refs.wrapper)
  }
}
</script>

html模版
wrapper下必須用一個子元素包裹住所有的滾動內容

//ref屬性可以獲取dom元素
<template>
  <div class="list position wrapper" ref="wrapper">
    <div>
      <div class="listItem">
        <div class="title">您的位置</div>
        <ul class="whiteBg">
          <li>杭州</li>
        </ul>
      </div>
      <div class="listItem">
        <div class="title">A</div>
        <ul class="whiteBg">
          <li>澳門</li>
          <li>阿壩州</li>
          <li>阿克蘇地區</li>
          <li>阿拉爾</li>
          <li>阿拉善盟</li>
          <li>阿里</li>
          <li>阿勒泰</li>
          <li>安康</li>
          <li>安慶</li>
          <li>鞍山</li>
          <li>安順</li>
          <li>安陽</li>
        </ul>
      </div>
      <div class="listItem">
        <div class="title">A</div>
        <ul class="whiteBg">
          <li>澳門</li>
          <li>阿壩州</li>
          <li>阿克蘇地區</li>
          <li>阿拉爾</li>
          <li>阿拉善盟</li>
          <li>阿里</li>
          <li>阿勒泰</li>
          <li>安康</li>
          <li>安慶</li>
          <li>鞍山</li>
          <li>安順</li>
          <li>安陽</li>
        </ul>
      </div>
    </div>
  </div>
</template>

css

.list
    left 0
    right 0
    top 175px
    bottom 0
    overflow hidden

better-scroll的參數和方法