vue踩坑筆記 十一.vue中引入滑塊組件

效果圖

安裝依賴

npm install better-scroll -S

常見用法

BetterScroll 最常見的應用場景是列表滾動，我們來看一下它的 html 結構。

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- 這裏可以放一些其它的 DOM，但不會影響滾動 -->
</div>

上面的代碼中 BetterScroll 是作用在外層 wrapper 容器上的，滾動的部分是 content 元素。這裏要注意的是，BetterScroll 只處理容器（wrapper）的第一個子元素（content）的滾動，其它的元素都會被忽略。

最簡單的初始化代碼如下：

<template>
   <div class='list' ref = "wrapper">
     <div>
      	// 想具有滾動效果的dom元素
     </div>
   </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  mounted () {
    this.scroll = new BScroll(this.$refs.wrapper)
  }
}
</script>

完整代碼

<!--  -->
<template>
   <div class='list' ref = "wrapper">
     <div>
      <div class = "area">
        <p>當前城市</p>
        <div class="btnList">
          <div class="btn">北京</div>
        </div>
      </div>
      <div class = "area">
        <p>熱門城市</p>
        <div class="btnList">
          <div class="btn">北京</div>
          <div class="btn">北京</div>
          <div class="btn">北京</div>
          <div class="btn">北京</div>
          <div class="btn">北京</div>
          <div class="btn">北京</div>
        </div>
      </div>
      <div class = "area">
        <p>當前城市</p>
        <div class="btnList">
          <div class="btn">北京</div>
        </div>
      </div>
      <div class = "area">
        <p>熱門城市</p>
        <div class="btnList">
          <div class="btn">北京</div>
          <div class="btn">北京</div>
          <div class="btn">北京</div>
          <div class="btn">北京</div>
          <div class="btn">北京</div>
          <div class="btn">北京</div>
        </div>
      </div><div class = "area">
        <p>當前城市</p>
        <div class="btnList">
          <div class="btn">北京</div>
        </div>
      </div>
      <div class = "area">
        <p>熱門城市</p>
        <div class="btnList">
          <div class="btn">北京</div>
          <div class="btn">北京</div>
          <div class="btn">北京</div>
          <div class="btn">北京</div>
          <div class="btn">北京</div>
          <div class="btn">北京</div>
        </div>
      </div>
      <div class = "area">
        <p>當前城市</p>
        <div class="btnList">
          <div class="btn">北京</div>
        </div>
      </div>
      <div class = "area">
        <p>熱門城市</p>
        <div class="btnList">
          <div class="btn">北京</div>
          <div class="btn">北京</div>
          <div class="btn">北京</div>
          <div class="btn">北京</div>
          <div class="btn">北京</div>
          <div class="btn">北京</div>
        </div>
      </div><div class = "area">
        <p>當前城市</p>
        <div class="btnList">
          <div class="btn">北京</div>
        </div>
      </div>
      <div class = "area">
        <p>熱門城市</p>
        <div class="btnList">
          <div class="btn">北京</div>
          <div class="btn">北京</div>
          <div class="btn">北京</div>
          <div class="btn">北京</div>
          <div class="btn">北京</div>
          <div class="btn">北京</div>
        </div>
      </div>
      <div class = "area">
        <p>當前城市</p>
        <div class="btnList">
          <div class="btn">北京</div>
        </div>
      </div>
      <div class = "area">
        <p>熱門城市</p>
        <div class="btnList">
          <div class="btn">北京</div>
          <div class="btn">北京</div>
          <div class="btn">北京</div>
          <div class="btn">北京</div>
          <div class="btn">北京</div>
          <div class="btn">北京</div>
        </div>
      </div>
     </div>
   </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  components: {},
  data () {
    return {
    }
  },
  methods: {},
  created () {},
  mounted () {
    this.scroll = new BScroll(this.$refs.wrapper)
  }
}
</script>

<style lang = "less" scoped>
.list{
    overflow: scroll;
    position: absolute;
    top: 1.7rem;
    bottom: 0;
  .area{
    p{
      background-color: #EBEBED;
      font-size: .2rem;
      font-weight: 600;
      line-height: .5rem;
      text-indent: .2rem;
    }

    .btnList{
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding: .15rem 0;
      padding-right: .4rem;
      .btn{
        width: 1rem;
        padding: .1rem .2rem;
        margin: .1rem .15rem;
        border: 1px solid #ccc;
        text-align: center;
      }
    }
  }
}
</style>

坑

在滑塊中可能會碰到這樣的bug,在pc端模擬是點擊沒有問題,但是在真機測試時,無法觸發click事件,這個時候就要在better-scroll初始化的時候加上一行配置

{ click: true }

完整初始化代碼

mounted () {
    this.scroll = new BScroll(this.$refs.wrapper, { click: true })
  },

完美解決移動端雙擊不觸發onclick事的bug