vue.js移動(dòng)端app之上拉加載以及下拉刷新實(shí)戰(zhàn)

更新時(shí)間：2017年09月11日 10:32:13 作者：Runlin

這篇文章主要介紹了vue.js移動(dòng)端app之上拉加載以及下拉刷新實(shí)戰(zhàn)，非常具有實(shí)用價(jià)值，需要的朋友可以參考下

上拉加載以及下拉刷新都是移動(dòng)端很常見的功能，在搜索或者一些分類列表頁(yè)面常常會(huì)用到。

跟橫向滾動(dòng)一樣，我們還是采用better-scroll這個(gè)庫(kù)來(lái)實(shí)現(xiàn)。由于better已經(jīng)更新了新的版本，之前是0.幾的版本，更新了一下發(fā)現(xiàn)，現(xiàn)在已經(jīng)是1.2.6這個(gè)版本了，新版本多了些比較好用的api，所以我也重寫了之前的代碼，用新的api來(lái)實(shí)現(xiàn)上拉加載以及下拉刷新。

首先把基本的樣式寫好，這里就略過了，然后引入better-scroll庫(kù)

import BScroll from 'better-scroll'

其次，在mounted生命周期實(shí)例化scroll,可以獲取完數(shù)據(jù)后再new，也可以先new后，獲取完數(shù)據(jù)調(diào)用refresh。

實(shí)例時(shí)需要傳入一個(gè)配置參數(shù)，由于參數(shù)比較多，具體的請(qǐng)參考文檔，這里只講2個(gè)重點(diǎn)的：

//是否開啟下拉刷新，可傳入true或者false,如果需要更多配置可以傳入一個(gè)對(duì)象

pullDownRefresh：{
  threshold:80,
  stop:40
}

//是否開啟上拉加載，同上，上拉無(wú)stop參數(shù)，這里需要注意是負(fù)數(shù)
pullUpLoad：{
  threshold:-80,
}

/**
 * 
 * @param threshold 觸發(fā)事件的閥值，即滑動(dòng)多少距離觸發(fā)
 * @param stop 下拉刷新后回滾距離頂部的距離（為了給loading留出一點(diǎn)空間）
 */

以上的數(shù)字個(gè)人感覺比較合適，但是這里有一個(gè)問題，由于我采用的是淘寶flexible.js來(lái)適配，這就導(dǎo)致：在安卓下80這個(gè)距離是合適的，但是到了iphone6s下，由于被縮放了3陪，所以現(xiàn)在80在iphone6s下就是27左右了。

所以，對(duì)于不同縮放程度的屏幕，還需要乘以對(duì)應(yīng)的縮放比。

淘寶flexible.js里面其實(shí)已經(jīng)有這個(gè)獲取屏幕縮放比方法，這里直接從里面拿：

//在util.js里面加一個(gè)方法
export function getDeviceRatio(){
  var isAndroid = window.navigator.appVersion.match(/android/gi);
  var isIPhone = window.navigator.appVersion.match(/iphone/gi);
  var devicePixelRatio = window.devicePixelRatio;
  var dpr;
  if (isIPhone) {
    // iOS下，對(duì)于2和3的屏，用2倍的方案，其余的用1倍方案
    if (devicePixelRatio >= 3) {        
      dpr = 3;
    } else if (devicePixelRatio >= 2){
      dpr = 2;
    } else {
      dpr = 1;
    }
  } else {
    // 其他設(shè)備下，仍舊使用1倍的方案
    dpr = 1;
  }
  return dpr
}

import{ DEVICE_RATIO} from '../base/js/api.js'
/*獲取當(dāng)前縮放比*/
const DEVICE_RATIO=getDeviceRatio();


 /*下拉配置*/
const DOWN_CONFIG={
 threshold:80*DEVICE_RATIO,
 stop:40*DEVICE_RATIO
}
/*上拉配置*/
const UP_CONFIG={
 threshold:-80*DEVICE_RATIO,
}

this.scroller = new BScroll(scrollWrap,{
 click:true,
 probeType:3,
 pullDownRefresh:DOWN_CONFIG,
 pullUpLoad:UP_CONFIG
});

實(shí)例化后，接下來(lái)就是監(jiān)聽上拉和下拉事件了。betterScroll新增了一些事件，主要的有：

/*下拉事件*/
this.scroller.on('pullingDown',()=> {});

/*上拉事件*/
this.scroller.on('pullingUp',()=>{});

觸發(fā)上拉或者下拉事件后，需要我們調(diào)用 this.scroller.finishPullDown() 或者 this.scroller.finishPullUp() 來(lái)通知better-scroll事件完成。

大致的流程是這樣的：

this.scroller.on('pullingDown',()=> {
  
  <!-- 1. 發(fā)送請(qǐng)求獲取數(shù)據(jù) -->
  
  <!-- 2. 獲取成功后，通知事件完成 -->
  
  <!-- 3. 修改data數(shù)據(jù)，在nextTick調(diào)用refresh -->
});

通常操作完成后都需要我們手動(dòng)觸發(fā)refresh方法來(lái)重新計(jì)算可滾動(dòng)的距離，因此可以寫一個(gè)watch監(jiān)聽數(shù)據(jù)的變化，這樣我們只需要改變數(shù)據(jù)，不用每次操作數(shù)據(jù)后都調(diào)用refresh方法。

watch:{
 dataList(){
  this.$nextTick(()=>{
   this.scroller.refresh(); 
  }) 
 }
},

如果你使用的版本還是舊的，那可以在on( scroll )事件的時(shí)候進(jìn)行判斷來(lái)實(shí)現(xiàn)功能

this.scroller.on("scroll",(pos)=>{ 
  //獲取整個(gè)滾動(dòng)列表的高度
  var height=getStyle(scroller,"height");

  //獲取滾動(dòng)外層wrap的高度
  var pageHeight=getStyle(scrollWrap,"height");

  //觸發(fā)事件需要的閥值
  var distance=80*DEVICE_RATIO;

  //參數(shù)pos為當(dāng)前位置

  if(pos.y>distance){ 

    //console.log("下拉");
    //do something
   
  }else if(pos.y-pageHeight<-height-distance){

    //console.log("上拉");
    //do something
  }

為了防止多次觸發(fā)，需要加2個(gè)開關(guān)類的東西;

var onPullUp=true;

var onPullDown=true;

每次觸發(fā)事件時(shí)，將對(duì)應(yīng)的開關(guān)設(shè)置為false, 等操作完成后，再重新設(shè)置為true,否則多次下拉或者上拉就會(huì)觸發(fā)多次事件。通過設(shè)置開關(guān)可以保證每次只有一個(gè)事件在進(jìn)行。

最后，來(lái)封裝成一個(gè)組件

 <template>
  <div ref="wrapper" class="list-wrapper"> 
    <div class="scroll-content">    
      <slot></slot>     
    </div>   
  </div>
</template>

由于每個(gè)頁(yè)面需要滾動(dòng)的具體內(nèi)容都是不一樣的，所以用了一個(gè)插槽來(lái)分發(fā)。

組件需要的參數(shù)由父級(jí)傳入，通過prop來(lái)接收并設(shè)置默認(rèn)值

 export default {
  props: {
   dataList:{
    type: Array,
    default: []
   },
   probeType: {
    type: Number,
    default: 3
   },
   click: {
    type: Boolean,
    default: true
   },  
   pullDownRefresh: {
    type: null,
    default: false
   },
   pullUpLoad: {
    type: null,
    default: false
   },  
  }

組件掛載后，在事件觸發(fā)時(shí)并不直接處理事件，而是向父級(jí)發(fā)送一個(gè)事件，父級(jí)通過在模板v-on接收事件并處理后續(xù)的邏輯

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

  this.scroll.on('pullingUp',()=> {
    if(this.continuePullUp){
      this.beforePullUp();
      this.$emit("onPullUp","當(dāng)前狀態(tài)：上拉加載");
    }
  });

  this.scroll.on('pullingDown',()=> {
    this.beforePullDown();
    this.$emit("onPullDown","當(dāng)前狀態(tài)：下拉加載更多");
  }); 
}

父組件在使用時(shí)，需要傳入配置參數(shù)Props以及處理子組件發(fā)射的事件，并且用具體的內(nèi)容并替換掉 slot 標(biāo)簽

  <Scroller 
    id="scroll"
    ref="scroll" 
    :dataList="filmList"
    :pullDownRefresh="DOWN_CONFIG"
    :pullUpLoad="UP_CONFIG"
    @onPullUp="pullUpHandle"
    @onPullDown="pullDownHandle"
   >

    <ul>
       <router-link class="film-list" v-for="(v,i) in filmList" :key="v.id" tag="li" :to='{path:"/film-detail/"+v.id}'>
          <div class="film-list__img">
             <img v-lazy="v.images.small" alt="" />        
          </div>
          <div class="film-list__detail">
            <p class="film-list__detail__title">{{v.title}}</p>
            <p class="film-list__detail__director">導(dǎo)演：{{filterDirectors(v.directors)}}</p>
            <p class="film-list__detail__year">年份：{{v.year}}<span>{{v.stock}}</span></p>
            <p class="film-list__detail__type">類別：{{v.genres.join(" / ")}}<span></span></p>
            <p class="film-list__detail__rank">評(píng)分：<span>{{v.rating.average}}分</span></p>
          </div>             
        </router-link>
     </ul>     
   </Scroller>

父組件可以通過this.$refs.xxx來(lái)獲取到子組件，可以調(diào)用子組件里面的方法；

 computed:{
    scrollElement(){
      return this.$refs.scroll
    }
  }

完整的scroller組件內(nèi)容如下

   <template>
     <div ref="wrapper" class="list-wrapper"> 
       <div class="scroll-content">    
         <slot></slot>
         <div>
           <PullingWord v-show="!inPullUp&&dataList.length>0" :loadingWord="beforePullUpWord"></PullingWord>
           <Loading v-show="inPullUp" :loadingWord='PullingUpWord'></Loading>
         </div>    
       </div> 

       <transition name="pullDown">
         <Loading class="pullDown" v-show="inPullDown" :loadingWord='PullingDownWord'></Loading>
       </transition> 
     </div>
   </template>


   <script >
    import BScroll from 'better-scroll'
    import Loading from './loading.vue'
    import PullingWord from './pulling-word'

    const PullingUpWord="正在拼命加載中...";
    const beforePullUpWord="上拉加載更多";
    const finishPullUpWord="加載完成";

    const PullingDownWord="加載中...";

    export default {
     props: {
      dataList:{
       type: Array,
       default: []
      },
      probeType: {
       type: Number,
       default: 3
      },
      click: {
       type: Boolean,
       default: true
      },  
      pullDownRefresh: {
       type: null,
       default: false
      },
      pullUpLoad: {
       type: null,
       default: false
      },  
     },
     data() {
       return { 
         scroll:null,
         inPullUp:false,
         inPullDown:false,
         beforePullUpWord,
         PullingUpWord,
         PullingDownWord,
         continuePullUp:true
       }
     },
      
     mounted() {
       setTimeout(()=>{
         this.initScroll();

         this.scroll.on('pullingUp',()=> {
           if(this.continuePullUp){
             this.beforePullUp();
             this.$emit("onPullUp","當(dāng)前狀態(tài)：上拉加載");
           }
         });

         this.scroll.on('pullingDown',()=> {
           this.beforePullDown();
           this.$emit("onPullDown","當(dāng)前狀態(tài)：下拉加載更多");
         });

       },20)
       
     },
     methods: {
       initScroll() {
         if (!this.$refs.wrapper) {
           return
         }
         this.scroll = new BScroll(this.$refs.wrapper, {
           probeType: this.probeType,
           click: this.click,    
           pullDownRefresh: this.pullDownRefresh,
           pullUpLoad: this.pullUpLoad,
         })
       },
       beforePullUp(){
         this.PullingUpWord=PullingUpWord;
         this.inPullUp=true;
       }, 
       beforePullDown(){
         this.disable();
         this.inPullDown=true;
       },
       finish(type){
         this["finish"+type]();
         this.enable();
         this["in"+type]=false; 
       },
       disable() {
         this.scroll && this.scroll.disable()
       },
       enable() {
         this.scroll && this.scroll.enable()
       },
       refresh() {
         this.scroll && this.scroll.refresh()
       }, 
       finishPullDown(){
         this.scroll&&this.scroll.finishPullDown()
       },
       finishPullUp(){
         this.scroll&&this.scroll.finishPullUp()
       },   
     },
        
     watch: {
       dataList() {        
         this.$nextTick(()=>{
           this.refresh();            
         }) 
       }
     },
     components: {
       Loading,
       PullingWord
     }
    }

   </script>

具體內(nèi)容可以查看github , 項(xiàng)目地址如下：https://github.com/linrunzheng/vueApp

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: