上篇，我們實現了城市列表的樣式，遮蔽了瀏覽器的滑動，同時，在子元素中沒有設定滑動。本篇我們來設定一個友好的滑動與字母表的佈局。

我們使用第三方包 BetterScroll 

地址：https://github.com/ustbhuangyi/better-scroll

先，在專案裡下載進來

npm install better-scroll --save

然後可以重啟伺服器使用了

根據官網給出的介紹，如下。

我們要調整一下我們的元素結構，加一層 content 類。

然後，使用這個外掛，官方示例

藉助 ref ,我們可以獲得dom 元素.

<template> 與 <script>程式碼

<template>
  <div class="list" ref="wrapper">
    <div>
      <div class="area">
        <div class="title border-topbottom">當前城市</div>
        <div class="button-list">
          <div class="button-wraper">
            <div class="button">北京</div>
          </div>
        </div>
      </div>
      <div class="area">
        <div class="title border-topbottom">熱門城市</div>
        <div class="button-list">
          <div class="button-wraper">
            <div class="button">北京</div>
          </div>
          <div class="button-wraper">
            <div class="button">北京</div>
          </div>
          <div class="button-wraper">
            <div class="button">北京</div>
          </div>
          <div class="button-wraper">
            <div class="button">北京</div>
          </div>
          <div class="button-wraper">
            <div class="button">北京</div>
          </div>
        </div>
      </div>
      <div class="area">
        <div class="title border-topbottom">A</div>
        <div class="item-list">
          <div class="item border-bottom">阿拉爾</div>
          <div class="item border-bottom">阿拉爾</div>
          <div class="item border-bottom">阿拉爾</div>
          <div class="item border-bottom">阿拉爾</div>
          <div class="item border-bottom">阿拉爾</div>
          <div class="item border-bottom">阿拉爾</div>
        </div>
      </div>
      <div class="area">
        <div class="title border-topbottom">A</div>
        <div class="item-list">
          <div class="item border-bottom">阿拉爾</div>
          <div class="item border-bottom">阿拉爾</div>
          <div class="item border-bottom">阿拉爾</div>
          <div class="item border-bottom">阿拉爾</div>
          <div class="item border-bottom">阿拉爾</div>
          <div class="item border-bottom">阿拉爾</div>
        </div>
      </div>
      <div class="area">
        <div class="title border-topbottom">A</div>
        <div class="item-list">
          <div class="item border-bottom">阿拉爾</div>
          <div class="item border-bottom">阿拉爾</div>
          <div class="item border-bottom">阿拉爾</div>
          <div class="item border-bottom">阿拉爾</div>
          <div class="item border-bottom">阿拉爾</div>
          <div class="item border-bottom">阿拉爾</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
  name: 'CityList',
  mounted () {
    this.scroll = new Bscroll(this.$refs.wrapper)
  }
}
</script>
 

可以啦。

下面我們來建立右側字母表。

這是一個新元件。在city/components 中新建一個元件 Alphabet.vue 

初始化程式碼如下。

<template>
  <ul class="list">
    <li class="item">A</li>
    <li class="item">A</li>
    <li class="item">A</li>
    <li class="item">A</li>
    <li class="item">A</li>
    <li class="item">A</li>
  </ul>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
  name: 'CityAlphabet'
}
</script>

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

然後，在 City.vue 中引入。

最終，Alphabet.vue 程式碼，如下。

<template>
  <ul class="list">
    <li class="item">A</li>
    <li class="item">A</li>
    <li class="item">A</li>
    <li class="item">A</li>
    <li class="item">A</li>
    <li class="item">A</li>
  </ul>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
  name: 'CityAlphabet'
}
</script>

<style lang="stylus" scoped>
  @import '~styles/variables.styl'
  .list
    display: flex
    flex-direction: column
    justify-content: center
    position: absolute
    top: 1.5rem
    right: 0
    bottom: 0
    width: .4rem
    .item
      line-height: .4rem
      text-align: center
      color: $bgColor
</style>

好啦，可以提交合並啦。