使用better-scroll制作輪播圖組件

使用better-scroll實(shí)現(xiàn)一個(gè)可以上下拖動(dòng)的組件

<template>
  <div ref="wrapper">
    <slot></slot>
  </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  name: 'scroll',
  props: {
    // 控制組件監(jiān)聽(tīng)滾動(dòng)事件緩慢拖動(dòng)時(shí)監(jiān)聽(tīng)到還是快速拖動(dòng)
    probeType: {
      type: Number,
      default: 1
    },
    // 是否手動(dòng)派發(fā)點(diǎn)擊事件
    click: {
      type: Boolean,
      default: true
    },
    // 組建的數(shù)據(jù)，有可能動(dòng)態(tài)變化的
    data: {
      type: Array,
      default: null
    }
  },
  methods: {
    _initScroll() {
      if (!this.$refs.wrapper) {
        return;
      }
      this.scroll = new BScroll(this.$refs.wrapper, {
        probeType: this.probeType,
        click: this.click
      })
    },
    enable() {
      // enable()啟用 better-scroll
      this.scroll && this.scroll.enable()
    },
    disable() {
      // disable()  禁用 better-scroll
      this.scroll && this.scroll.disable()
    },
    refresh() {
      // 刷新scroll 重新計(jì)算高度
      this.scroll && this.scroll.refresh()
    }
  },
  watch: {
    data() {
      setTimeout(() => {
        this.refresh()
      }, 20)
    }
  },
  mounted() {
    // mounted之后，還要確保dom已經(jīng)渲染
    setTimeout(() => {
      this._initScroll()
    }, 20)
  }
}
</script>

<style scoped>

</style>

組件代碼如上。
在調(diào)用時(shí)，傳入data參數(shù)，可以為需要滾動(dòng)部分的數(shù)據(jù)，這樣可以保證在收到數(shù)據(jù)后，watch到data變化，調(diào)用refresh()方法重新計(jì)算一下需要上下滑動(dòng)的距離。

better-scroll組件使用的注意點(diǎn)是：一定要在dom樹(shù)渲染完畢后再調(diào)用組件，此時(shí)計(jì)算的高度或?qū)挾炔耪_。

為了保證能在DOM樹(shù)渲染后才調(diào)用，用了以下方法：

1. 組件的mounted()里才調(diào)用初始化函數(shù)。
2. 調(diào)用該組件的組件中，如果有需要img加載完畢才能撐開(kāi)高度的DOM節(jié)點(diǎn)，可以給這個(gè)img加一個(gè)load事件，在圖片加載完畢之后調(diào)用一次refresh()方法/

 <img @load="loadImage" :src="item.picUrl">

loadImage() {
      if (!this.checkLoaded) {
        /*
         *
         *技巧?。。≡O(shè)置一個(gè)標(biāo)志位，確保邏輯只執(zhí)行一次。!!!!!!
          */
        this.$refs.scroll.refresh();
        this.checkLoaded = true;
      }
    }

3. 傳入data數(shù)據(jù)，監(jiān)聽(tīng)data變化，data一旦變化調(diào)用一次refresh()方法。

vue.js中實(shí)現(xiàn)圖片懶加載

插件Vue-LazyLoad(https://github.com/hilongjw/vue-lazyload)
載入插件老樣子，
先安裝：

$ npm install vue-lazyload -D

-save和save-dev可以省掉你手動(dòng)修改package.json文件的步驟。
spm install module-name -save 自動(dòng)把模塊和版本號(hào)添加到dependencies部分
spm install module-name -save-dve 自動(dòng)把模塊和版本號(hào)添加到devdependencies部分
-S就是--save的簡(jiǎn)寫
-D就是--save-dev
devDependencies 里面的插件只用于開(kāi)發(fā)環(huán)境，不用于生產(chǎn)環(huán)境，而 dependencies 是需要發(fā)布到生產(chǎn)環(huán)境的。

安裝完畢后在main.js引入,use兩部曲

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad, {
  loading: require('common/image/laozizhenshicaole.jpg')
});

Constructor Options

調(diào)用時(shí)只要：

<img :src="item.imgurl" width="60" height="60"/>

替換為

<img v-lazy="item.imgurl" width="60" height="60"/>

即可

使用fastclick組件解決移動(dòng)端click事件300ms延遲的問(wèn)題

先來(lái)看怎么用？

import fastclick from 'fastclick'
fastclick.attach(document.body)

原生js中怎么用？

安裝

npm install fastclick -S

//先引入
<scriptsrc='/path/to/fastclick.js'></script>
//腳本必須加載到實(shí)例化fastclick在頁(yè)面的任何元素之前。
//實(shí)例化 fastclick 最好在body元素的前面，這是使用推薦的方法：
if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

//jquery中可以：
$(function() {
    FastClick.attach(document.body);
});

click事件為什么有延遲?

“...mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.”

大概意思就是：從點(diǎn)擊屏幕上的元素到觸發(fā)元素的 click 事件，移動(dòng)瀏覽器會(huì)有大約 300 毫秒的等待時(shí)間。這是因?yàn)闉g覽器想看看你是不是要進(jìn)行雙擊（double tap）操作。

兼容性

• Mobile Safari on iOS 3 and upwards
• Chrome on iOS 5 and upwards
• Chrome on Android (ICS)
• Opera Mobile 11.5 and upwards
• Android Browser since Android 2
• PlayBook OS 1 and upwards

什么時(shí)候不用它?

astclick不附加任何監(jiān)聽(tīng)器在桌面瀏覽器上面，所以如果你的項(xiàng)目不是針對(duì)的移動(dòng)瀏覽器，那么就不要使用這個(gè)插件。
Android 設(shè)備上的 google瀏覽器 （Chrome） 32+ 版本，在meta頭信息中設(shè)置width=device-width 沒(méi)有300毫秒的延時(shí)，所以也無(wú)需使用本插件。
<meta name="viewport" content="width=device-width, initial-scale=1">
Chrome瀏覽器在安卓設(shè)備上的時(shí)候，設(shè)置meta頭信息中 user-scalable=no 但是這樣就無(wú)法讓用戶多點(diǎn)觸控縮放網(wǎng)頁(yè)了。
對(duì)于IE11 + 你可以設(shè)置 touch-action: manipulation; 來(lái)禁用通過(guò)雙擊放大某些元素例如：鏈接和按鈕的，對(duì)于IE10使用 -ms-touch-action: manipulation 。

better-scroll和fastclick沖突

輪播圖點(diǎn)擊有時(shí)會(huì)出現(xiàn)點(diǎn)擊不轉(zhuǎn)向鏈接的情況，我們?cè)谏舷聺L動(dòng)的better-scroll中，click配置成了true，是可以點(diǎn)擊的。這個(gè)click為true是必須要的。
fastclick有些默認(rèn)行為，我們最終點(diǎn)擊的是img標(biāo)簽，給img加一個(gè)class="needsclick"，可以告訴fastclick這個(gè)元素是需要被點(diǎn)擊的

loading組件展示加載中的狀態(tài)

import Loading from '../../base/loading/loading.vue'

<div  class="loading-container" v-show="!discList.length">
        <loading></loading>
</div>

.loading-container
        position: absolute
        width: 100%
        top: 50%
        transform: translateY(-50%)