vue better-scroll 使用方法

1.安裝better-scroll
npm install better-scroll --save
2. 引用
import Bscroll from ‘better-scroll’
3.注意的問題
div部分注意的問題
style部分注意的問題

在滾動的區域一定要加上絕對定位，translate屬性要根據當前div位於屏幕的位置計算展示區域的高度

position:absolute
top: 0
left :0
bottom:0
right:0
上下左右根據div要擺放的位置而定

例子

<template>
  <div class="list" ref="wrapper">//標註dom 滾動區域
    <div>//滾動區域只能由一個大的區塊包裹住
      <div class="area">
        <div class="title">當前城市</div>
        <div class="button-list">
          <div class="button-wrapper"><div class="button">北京</div></div>
        </div>
      </div>
      <div class="area">
        <div class="title">熱門城市</div>
        <div class="button-list">
          <div class="button" v-for="item of hot" :key="item.id">{{ item.name }}</div>
        </div>
      </div>
      <div ref="areaCity">
        <div class="area cityList" v-for="(item, key) of cities" :ref="key">
          <div class="title">{{ key }}</div>
          <div class="item-list" v-for="city of item" :key="city.id">
            <div class="item border-bottom">{{ city.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import Bscroll from 'better-scroll'
export default{
    name:'CityList',
    props:{
      cities:{
        type:Object
      },
      hot:{
        type:Array
        },
        letter:{
          type:String
        }
    },
    data(){
        return{
            scrollY:0,
            listHeight:[]
        }
    },
    mounted(){
        //滾動操作
        this.scroll = new Bscroll(this.$refs.wrapper,{
          click:true,
          probeType:3
        })
        //獲取當前滾動的位置
        this.scroll.on('scroll',(pos) => {
            this.scrollY = Math.abs(Math.round(pos.y))
        })
        this.catculateHeight()
    },
    watch:{
      //監聽letter是否改變
      letter(){
         if(this.letter){
           //獲取標註div的內部元素
           const element = this.$refs[this.letter][0]
           //根據獲取到的div可以滑動到相應的位置
           this.scroll.scrollToElement(element,300)
         }
      },
      scrollY(){
        this.currentIndex()
      }
    },
    methods:{
    //獲取每個區塊的高度並填入listHeight數組中
      catculateHeight(){
        let height = 0
        let cityList = this.$refs.areaCity.getElementsByClassName('cityList')
        this.listHeight.push(height)
        for(let i=0 ; i<cityList.length; i++){
          let item = cityList[i]
          //獲取每個div的高度
          height += item.clientHeight
          this.listHeight.push(height)
        }
      },
      currentIndex(){
      //判斷索引指向的位置
          for(let i=0;i<this.listHeight.length;i++){
              let height1 = this.listHeight[i]
              let height2=this.listHeight[i+1]
              if(this.scrollY>=height1 && this.scrollY<height2){
                 this.$emit('current',i)
              }
          }
      }
    }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl'

.border-topbottom
  &:before
    border-color #ccc
  &:after
    border-color #ccc
.border-bottom
  &::before
    border-color #ccc
.list
  overflow hidden
  position absolute
  top 79px
  left 0
  right 0
  bottom 0
  .title
    line-height 27px
    background #eee
    padding-left 10px
    color #666
    font-size 13px
  .button-list
    overflow hidden
    padding 5px 12px 5px 5px
    .button
      float left
      width 29%
      margin 5px
      text-align center
      border 1px solid #ccc
  .item-list
    .item
      line-height 38px
      padding-left 10px
</style>

<template>
  <ul class="list">
    <li
      class="item"
      v-for="(item, index) of letters"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
      @click="handleLetterClick"
      :class="{ current: currentIndex === index }"
      :ref="item"
    >
      {{ item }}
    </li>
  </ul>
</template>

<script type="text/ecmascript-6">
export default{
    name:'CityAlphabet',
    props:{
      cities:{
        type:Object
      },
      currentIndex:{
        type:Number
      }
    },
    computed:{
      letters(){
        const letters = []
        for (let i in this.cities){
          letters.push(i)
        }
        return letters
      }
    },
    data(){
      return {
        touchStatus:false
      }
    },
    methods:{
      handleLetterClick(e){
        this.$emit('change',e.target.innerText)
      },
      handleTouchStart(){
        this.touchStatus = true
      },
      handleTouchMove(e){
        if(this.touchStatus){
          const startY = this.$refs['A'][0].offsetTop
          const touchY = e.touches[0].clientY - 79
          const index = Math.floor((touchY - startY)/20)
          if(index >=0 && index < this.letters.length){
            this.$emit('change',this.letters[index])
          }
        }
      },
      handleTouchEnd(){
        this.touchStatus = false
      }
    }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl'

.list
  display flex
  flex-direction column
  justify-content center
  position absolute
  right 0
  top 79px
  bottom 0
  width 20px
  .item
    line-height 20px
    text-align center
    color $bgColor
    &.current
      color #ccc
</style>

4.橫向滾動的方法
需要注意的問題是 要計算div的寬度 才能實現滾動