使用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)聽滾動(dòng)事件緩慢拖動(dòng)時(shí)監(jiān)聽到還是快速拖動(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樹渲染完畢后再調(diào)用組件，此時(shí)計(jì)算的高度或?qū)挾炔耪_规丽。

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

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

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

loadImage() {
      if (!this.checkLoaded) {
        /*
         *
         *技巧Ｋ蚁痢？嫒拧！設(shè)置一個(gè)標(biāo)志位巢音，確保邏輯只執(zhí)行一次遵倦。!!!!!!
          */
        this.$refs.scroll.refresh();
        this.checkLoaded = true;
      }
    }

3. 傳入data數(shù)據(jù)，監(jiān)聽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)把模塊和版本號添加到dependencies部分
spm install module-name -save-dve 自動(dòng)把模塊和版本號添加到devdependencies部分
-S就是--save的簡寫
-D就是--save-dev
devDependencies 里面的插件只用于開發(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延遲的問題

先來看怎么用龙致？

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

原生js中怎么用蛀缝？

安裝

npm install fastclick -S

//先引入
<scriptsrc='/path/to/fastclick.js'></script>
//腳本必須加載到實(shí)例化fastclick在頁面的任何元素之前。
//實(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)瀏覽器會有大約 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)聽器在桌面瀏覽器上面在讶，所以如果你的項(xiàng)目不是針對的移動(dòng)瀏覽器，那么就不要使用這個(gè)插件霜大。
Android 設(shè)備上的 google瀏覽器 （Chrome） 32+ 版本构哺，在meta頭信息中設(shè)置width=device-width 沒有300毫秒的延時(shí)，所以也無需使用本插件战坤。
<meta name="viewport" content="width=device-width, initial-scale=1">
Chrome瀏覽器在安卓設(shè)備上的時(shí)候曙强，設(shè)置meta頭信息中 user-scalable=no 但是這樣就無法讓用戶多點(diǎn)觸控縮放網(wǎng)頁了。
對于IE11 + 你可以設(shè)置 touch-action: manipulation; 來禁用通過雙擊放大某些元素例如：鏈接和按鈕的途茫，對于IE10使用 -ms-touch-action: manipulation 碟嘴。

better-scroll和fastclick沖突

輪播圖點(diǎn)擊有時(shí)會出現(xiàn)點(diǎn)擊不轉(zhuǎn)向鏈接的情況，我們在上下滾動(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%)