vue.js移動端app實戰4：上拉加載以及下拉刷新

時間 2019-12-14

標籤 vue.js vue 移動 app 實戰加載以及下拉刷新欄目 JavaScript 简体版

原文原文鏈接

上拉加載以及下拉刷新都是移動端很常見的功能，在搜索或者一些分類列表頁面經常會用到。javascript

跟橫向滾動同樣，咱們仍是採用better-scroll這個庫來實現。因爲better已經更新了新的版本，以前是0.幾的版本，更新了一下發現，如今已是1.2.6這個版本了，新版本多了些比較好用的api，因此我也重寫了以前的代碼，用新的api來實現上拉加載以及下拉刷新。vue

首先把基本的樣式寫好，這裏就略過了，而後引入better-scroll庫

import BScroll from 'better-scroll'

其次，在mounted生命週期實例化scroll,能夠獲取完數據後再new，也能夠先new後，獲取完數據調用refresh。

實例時須要傳入一個配置參數，因爲參數比較多，具體的請參考文檔，這裏只講2個重點的：java

//是否開啓下拉刷新，可傳入true或者false,若是須要更多配置能夠傳入一個對象

pullDownRefresh：{
    threshold:80,
    stop:40
}

//是否開啓上拉加載，同上，上拉無stop參數，這裏須要注意是負數
pullUpLoad：{
    threshold:-80,
}

/**
 * 
 * @param threshold 觸發事件的閥值，即滑動多少距離觸發
 * @param stop 下拉刷新後回滾距離頂部的距離（爲了給loading留出一點空間）
 */

以上的數字我的感受比較合適，可是這裏有一個問題，因爲我採用的是淘寶flexible.js來適配，這就致使：在安卓下80這個距離是合適的，可是到了iphone6s下，因爲被縮放了3陪，因此如今80在iphone6s下就是27左右了。android

因此，對於不一樣縮放程度的屏幕，還須要乘以對應的縮放比。

淘寶flexible.js裏面其實已經有這個獲取屏幕縮放比方法，這裏直接從裏面拿：

//在util.js裏面加一個方法
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下，對於2和3的屏，用2倍的方案，其他的用1倍方案
        if (devicePixelRatio >= 3) {                
            dpr = 3;
        } else if (devicePixelRatio >= 2){
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        // 其餘設備下，仍舊使用1倍的方案
        dpr = 1;
    }
    return dpr
}

import{ DEVICE_RATIO} from '../base/js/api.js'
/*獲取當前縮放比*/
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
});

實例化後，接下來就是監聽上拉和下拉事件了。betterScroll新增了一些事件，主要的有：

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

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

觸發上拉或者下拉事件後，須要咱們調用 this.scroller.finishPullDown() 或者 this.scroller.finishPullUp() 來通知better-scroll事件完成。

大體的流程是這樣的：git

this.scroller.on('pullingDown',()=> {
    
   <!-- 1. 發送請求獲取數據 -->
   
   <!-- 2. 獲取成功後，通知事件完成 -->
   
   <!-- 3. 修改data數據，在nextTick調用refresh -->
});

一般操做完成後都須要咱們手動觸發refresh方法來從新計算可滾動的距離，所以能夠寫一個watch監聽數據的變化，這樣咱們只須要改變數據，不用每次操做數據後都調用refresh方法。

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

若是你使用的版本仍是舊的，那能夠在on( scroll )事件的時候進行判斷來實現功能

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

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

   //觸發事件須要的閥值
   var distance=80*DEVICE_RATIO;

   //參數pos爲當前位置

   if(pos.y>distance){ 

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

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

爲了防止屢次觸發，須要加2個開關類的東西;

var onPullUp=true;

var onPullDown=true;

每次觸發事件時，將對應的開關設置爲false, 等操做完成後，再從新設置爲true,不然屢次下拉或者上拉就會觸發屢次事件。經過設置開關能夠保證每次只有一個事件在進行。github

最後，來封裝成一個組件

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

因爲每一個頁面須要滾動的具體內容都是不同的，因此用了一個插槽來分發。api

組件須要的參數由父級傳入，經過prop來接收並設置默認值

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
      },    
    }

組件掛載後，在事件觸發時並不直接處理事件，而是向父級發送一個事件，父級經過在模板v-on接收事件並處理後續的邏輯app

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","當前狀態：上拉加載");
        }
    });

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

父組件在使用時，須要傳入配置參數Props以及處理子組件發射的事件，而且用具體的內容並替換掉 slot 標籤iphone

<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">導演：{{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">評分：<span>{{v.rating.average}}分</span></p>
                    </div>                          
                </router-link>
          </ul>         
      </Scroller>

父組件能夠經過this.$refs.xxx來獲取到子組件，能夠調用子組件裏面的方法；flex

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

完整的scroller組件內容以下

<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","當前狀態：上拉加載");
                      }
                  });

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

              },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>

具體內容能夠查看github , 項目地址以下：https://github.com/linrunzheng/vueApp

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。