better-scroll

better-scroll:

npm 命令安裝 npm install better-scroll –save

官網：https://ustbhuangyi.github.io/better-scroll/doc/installation.html#npm

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

運行命令行之前先在package.json中配置版本

"dependencies": {
    "babel-runtime": "^6.26.0",
    "better-scroll": "^1.4.2",
    "vue": "^2.5.2",
    "vue-resource": "^1.3.4",
    "vue-router": "^3.0.1"
  }

在哪裏用在哪裏引入

import Bscroll from 'better-scroll'

 let ERROK = 0
  export default{
    name: 'goods',
    data () {
      return {
        goods: {},
        // addSelect: 0, 用不到了
        listHeight: [], // 每個標題的高度
        scrollY: 0 // 左邊點擊 右邊要滾動的距離，右邊滾動的距離選中左邊的塊
      }
    },
    computed: {
      currentIndex () {
        let scrollY = Math.abs(Math.round(this.scrollY))
       // console.log(scrollY)
        for (var i = 0, len = this.listHeight.length; i < len; i++) {
          let height1 = this.listHeight[i]
          let height2 = this.listHeight[i + 1]
          if (!height2 || (scrollY >= height1 && scrollY < height2)) {
            return i
          }
        }
        return 0
      }
    },
    methods: {
      changeTab (index, event) { // 點擊事件操作滾動 間接觸發currentIndex（）函數 使index動態改變 左邊顏色改變
        // this.addSelect = index
        let foodList = this.$refs.foods.getElementsByClassName('food-cont')
        let el = foodList[index]
        // 設置滾動的距離（點擊滾動到指定的位置）
        this.foodWrapperScroll.scrollToElement(el, 300)
      },
      // 在這裏初始化 better-scroll  注意Vue中數據更新是異步的，在數據還沒有加載完之前，BScroll是無法獲取目標內容容器的高度的，就會出現無法滾動的現象。這裏可以用$nextTick()解決。
      _initScroll () {
        // console.log(this.$refs.foodWrapper)
        // console.log(this.$refs.menuWrapper)
        this.menuWrapperScroll = new Bscroll(this.$refs.menuWrapper, {
          click: true // 點擊事件許可  讓子元素可以點擊
        })
        this.foodWrapperScroll = new Bscroll(this.$refs.foodWrapper, {
          click: true,
          probeType: 3 // 實時監控滾動
        })
        // 監聽實時的 scrollY
        this.foodWrapperScroll.on('scroll', (pos) => {
          // 四捨五入後求絕對值（滾動的距離）
          this.scrollY = Math.abs(Math.round(pos.y))
        })
      },
      __calculateHeight () { // 獲取食物的li Dom節點列表
        let height = 0
        let heightList = []
        heightList.push(height)
        let foodList = this.$refs.foods.getElementsByClassName('food-cont')
       /*  console.log(foodList) */
        for (let i = 0, len = foodList.length; i < len; i++) {
          height += foodList[i].clientHeight
          // console.log(foodList[i].clientHeight)
          // console.log(window.getComputedStyle(foodList[i]).height)
          heightList.push(height)
          this.listHeight = heightList
        }
      }
    },
    created () {
      this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
      this.$http.get('./api/goods').then((result) => {
        result = result.body
        if (result.errno === ERROK) {
          this.goods = result.data
          /* console.log(this.goods) */
          // 數據加載完畢讓 better-scroll 起作用  因爲異步要放在$nextTick()中
          this.$nextTick(() => {
            this._initScroll()
            this.__calculateHeight()
          })
        }
      })
    }/* ,
    mounted () {
      console.log(this.$refs.foods.getElementsByClassName('food-cont'))
    },
    updated () {
      console.log(this.$refs.foods.getElementsByClassName('food-cont'))
    } */
  }

2、實現的效果：點擊右側選中的高亮 左側滾動到對應的地方 滑動左側商品 右邊對應的分類變高亮
主要是判斷 左側內用的Y值在哪個區間 根據左側的區間顯示右側的區間
首先要知道每一個區間的高度

better-scroll的屬性與方法

格式：var obj = new BScroll(object,{[option1,],.,.});
注意：
1、要確保object元素的高度比其父元素高
2、使用時，一定要確保object所在的dom渲染後再用上面的語句，或者fresh()

Options 參數

• 列表內容startX: 0 開始的X軸位置
• startY: 0 開始的Y軸位置
• scrollY: true 滾動方向爲 Y 軸
• scrollX: true 滾動方向爲 X 軸
• click: true 是否派發click事件，通常判斷瀏覽器派發的click還是betterscroll派 發的click，可以用event._constructed，若是bs派發的則爲true
• directionLockThreshold: 5
• momentum: true 當快速滑動時是否開啓滑動慣性
• bounce: true 是否啓用回彈動畫效果
• selectedIndex: 0 wheel 爲 true 時有效，表示被選中的 wheel 索引
• rotate: 25 wheel 爲 true 時有效，表示被選中的 wheel 每一層的旋轉角度
• wheel: false 該屬性是給 picker 組件使用的，普通的列表滾動不需要配置
• snap: false 該屬性是給 slider 組件使用的，普通的列表滾動不需要配置
• snapLoop: false 是否可以無縫循環輪播
• snapThreshold: 0.1 用手指滑動時頁面可切換的閾值，大於這個閾值可以滑動的下一頁
• snapSpeed: 400, 輪播圖切換的動畫時間
• swipeTime: 2500 swipe 持續時間
• bounceTime: 700 彈力動畫持續的毫秒數
• adjustTime: 400 wheel 爲 true 有用，調整停留位置的時間
• swipeBounceTime: 1200 swipe 回彈 時間
• deceleration: 0.001 滾動動量減速越大越快，建議不大於0.01
• momentumLimitTime: 300 符合慣性拖動的最大時間
• momentumLimitDistance: 15 符合慣性拖動的最小拖動距離
• resizePolling: 60 重新調整窗口大小時，重新計算better-scroll的時間間隔
• preventDefault: true 是否阻止默認事件
• preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } 阻止默認事件
• HWCompositing: true 是否啓用硬件加速
• useTransition: true 是否使用CSS3的Transition屬性
• useTransform: true 是否使用CSS3的Transform屬性
• probeType: 1 滾動的時候會派發scroll事件，會截流。2滾動的時候實時派發 scroll事件，不會截流。 3除了實時派發scroll事件，在swipe的情況下仍然能實時派發scroll事件

Events 事件

• beforeScrollStart - 滾動開始之前觸發
• scrollStart - 滾動開始時觸發
• scroll - 滾動時觸發
• scrollCancel - 取消滾動時觸發
• scrollEnd - 滾動結束時觸發
• touchend - 手指移開屏幕時觸發
• flick - 觸發了 fastclick 時的回調函數
• refresh - 當 better-scroll 刷新時觸發
• destroy - 銷燬 better-scroll 實例時觸發

• Example:

  let scroll = new BScroll(document.getElementById('wrapper'),{
     probeType: 3
  })
  
  scroll.on('scroll', (pos) => {
    console.log(pos.x + '~' + pos.y)
  })
  

函數列表

• scrollTo(x, y, time, easing)
  滾動到某個位置，x,y 代表座標，time 表示動畫時間，easing 表示緩動函數
  scroll.scrollTo(0, 500)

• scrollToElement(el, time, offsetX, offsetY, easing)
  滾動到某個元素，el（必填）表示 dom 元素，time 表示動畫時間，offsetX 和 offsetY 表示座標偏移量，easing 表示緩動函數

• refresh()
  強制 scroll 重新計算，當 better-scroll 中的元素髮生變化的時候調用此方法

• getCurrentPage()
  snap 爲 true 時，獲取滾動的當前頁，返回的對象結構爲 {x, y, pageX, pageY}，其中 x,y 代表滾動橫向和縱向的位置；pageX，pageY 表示橫向和縱向的頁面索引。用法如：getCurrentPage().pageX

• goToPage(x, y, time, easing)
  snap 爲 true，滾動到對應的頁面，x 表示橫向頁面索引，y 表示縱向頁面索引， time 表示動畫，easing 表示緩動函數（可省略不寫）

• enable()啓用 better-scroll，默認開啓

• disable() 禁用 better-scroll

• destroy() 銷燬 better-scroll，解綁事件