vue碰見better-scroll

better-scroll

better-scroll 是一款重點解決移動端（現已支持 PC 端）各類滾動場景需求的插件。它的核心是借鑑的 iscroll 的實現，它的 API 設計基本兼容 iscroll，在 iscroll 的基礎上又擴展了一些 feature 以及作了一些性能優化。

better-scroll 是基於原生 JS 實現的，不依賴任何框架。它編譯後的代碼大小是 63kb，壓縮後是 35kb，gzip 後僅有 9kb，是一款很是輕量的 JS lib。

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

 

 

文檔用法

HTML

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

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

JS

import BScroll from 'better-scroll'
const wrapper = document.querySelector('.wrapper')
const scroll = new BScroll(wrapper)

腦袋疼。。我按照文檔上的方法試了一下，發現不行，多是其餘地方影響到了。下次再試下

 

未調用data.json的用法

這時候數據未加載

HTML

<template>
    <div class="seller" ref="seller">
      <div class="seller-content">
         內容.......
      </div>
    </div>
</template>

JS

import BScroll from 'better-scroll'
export default {
  created () {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.seller, {
        click: true
      })
    })    
  }    
}

這個仍是有問題。。。刷新的時候加載沒有反應，可是沒效果。。考慮應該是數據未加載

 

調用data.json的用法

數據已加載

HTML

<template>
    <div class="seller" ref="seller">
      <div class="seller-content">
         內容.......
      </div>
    </div>
</template>

JS

export default {
  created () {
    this.$http.get('/api/seller').then((response) => {
      response = response.body
      if (response.errno === 0) {
        // this.seller = response.data
        this.$nextTick(() => {
          this.scroll = new BScroll(this.$refs.seller, {
            click: true
          })
        })
      }
    })
  }
}

這樣等數據響應之後再調用，就靈性了不少

水平滑動

this.picScroll = new BScroll(this.$refs.picWrapper, {
              // 容許點擊事件
              click: true,
              // 水平滾動
              scrollX: true,
              // eventPassthrough: 'vertical'
})

 

 

 

左右聯動滾動

左右菜單滾動時聯動，而且點擊左邊右邊滾動到相應位置  

 

點擊按鈕滾動到指定位置

例，點擊按鈕在300毫秒內滾動到指定位置

let el = document.getElementsByClassName('right-list')

this.scroll_right.scrollToElement(el[8], 300)

HTML

<button @click="abc">abc</button>

JS

created () {
    this.$nextTick(() => {
      this.scroll_right = new BScroll(this.$refs.hc_right, {
        click: true
      })
    })
  },
  methods: {
    abc () {
      let el = document.getElementsByClassName('right-list')
      this.scroll_right.scrollToElement(el[8], 300)
    }
  }

 

獲取滾動時的Y值

<div class="hc-right" ref="hc_right">
      <ul>
        <li class="right-list" v-for="(number,index) of num" v-bind:key="index">{{number}}{{number}}</li>
      </ul>
</div>

 

created () {
    this.$nextTick(() => {
      this.scroll_right = new BScroll(this.$refs.hc_right, {
        // 容許執行點擊事件
        click: true,
        // 滾動的探針---加了這個才能在滾動時獲取到數據
        probeType: 3
      })
      // 右側滾動時獲取到Y值
      this.scroll_right.on('scroll', (pos) => {
        this.scrollY = Math.abs(Math.round(pos.y))
      })
    })
  },

 

 

所有代碼

左右側聯動。

點擊左邊，右邊滑動到對應位置。

滑動右邊，左邊滾動到對應位置。

原理：左右側對應的index值是同樣的，滾動時保持index值相同。

這裏有個問題就是，若是右側的內容高度過低，就會使得左側沒法拉倒最下面，由於未達到最下面的選項，右側已經顯示出了內容。

 

效果-----

 

HTML-----

<template>
  <div class="hello">
    <div class="hc-left" ref="hc_left">
      <ul>
        <li class="left-list" :class="{'current':current == index}" v-for="(number,index) of num" @click="clickMove(index)" v-bind:key="index">{{number}}</li>
      </ul>
    </div>
    <div class="hc-right" ref="hc_right">
      <ul>
        <li class="right-list" v-for="(number,index) of num" v-bind:key="index">{{number}}{{number}}</li>
      </ul>
    </div>
  </div>
</template>

JS-----

<script>
import BScroll from 'better-scroll'
export default {
  data () {
    return {
      num: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
      // 高度數組
      heightArr: [],
      // 速度
      speed: 300,
      // 當前index
      current: 0
    }
  },
  created () {
    this.$nextTick(() => {
      this.scroll_left = new BScroll(this.$refs.hc_left, {
        // 容許執行點擊事件
        click: true
      })
      this.scroll_right = new BScroll(this.$refs.hc_right, {
        // 容許執行點擊事件
        click: true,
        // 滾動的探針---加了這個才能在滾動時獲取到數據
        probeType: 3
      })
      // 右側滾動時獲取到Y值
      this.scroll_right.on('scroll', (pos) => {
        // 取整的絕對值
        this.scrollY = Math.abs(Math.round(pos.y))
        let i = 0
        let el = document.getElementsByClassName('left-list')
        // 比較數組大小，得出對應的index
        for (i; i < this.heightArr.length; i++) {
          // 當大於時則跳出循環
          if (this.scrollY < this.heightArr[i]) {
            // 跳出循環
            break
          }
        }
        // 左側滾動到與右側對應的位置
        this.scroll_left.scrollToElement(el[i],this.speed)
        this.current = i
      })
      // 調用右側的高度數組
      this._calculateHeight()
    })
  },
  methods: {
    // 點擊左側跳轉到對應位置
    clickMove (index) {
      let el = document.getElementsByClassName('right-list')
      this.scroll_right.scrollToElement(el[index], this.speed)
      this.current = index
    },
    // 計算右側的高度數組
    _calculateHeight () {
      let el = document.getElementsByClassName('right-list')
      let heightAll = 0
      for (let i = 0; i < el.length; i++) {
        heightAll = heightAll + el[i].clientHeight
        this.heightArr.push(heightAll)
      }
    }
  }
}
</script>

CSS----

<style scoped>
.hello{
  position: absolute;
  top: 174px;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  overflow: hidden;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  width: 100%;
  line-height: 60px;
  border: 1px solid red;
  text-align: center
}
a {
  color: #42b983;
}
.hello-content{
  display: flex;
}
.hc-left{
  width: 100px;
  flex: 0 0 100px
}
.hc-right{
  flex: 1
}
.hc-right li{
  line-height: 100px
}
.right-list:nth-child(2n+1){
  line-height: 200px
}
.hc-left .current{
  background-color: red;
  color: white;
}
</style>