2. 程式人生 > >vue mint-ui原始碼解析之loadmore元件

vue mint-ui原始碼解析之loadmore元件

阿新 • • 發佈：2019-02-03

  • 元件的template html

      <div class="mint-loadmore">
    <div class="mint-loadmore-content" :class="{ 'is-dropped': topDropped || bottomDropped}" :style="{ 'transform': 'translate3d(0, ' + translate + 'px, 0)' }">
      <slot name="top">
        <div class="mint-loadmore-top" v-if="topMethod"
     
    >    
          <spinner v-if="topStatus === 'loading'" class="mint-loadmore-spinner" :size="20" type="fading-circle"></spinner>
          <span class="mint-loadmore-text">{{ topText }}</span>
        </div>
      </slot>
      <slot></slot>
      <slot name
     
    ="bottom">    
        <div class="mint-loadmore-bottom" v-if="bottomMethod">
          <spinner v-if="bottomStatus === 'loading'" class="mint-loadmore-spinner" :size="20" type="fading-circle"></spinner>
          <span class="mint-loadmore-text">{{ bottomText }}</span>
        </div
     
    >    
      </slot>
    </div>
  </div>

    關於 上面的spinner標籤，是一個元件，這裡不做詳細介紹。top solt和bottom slot中的內容是展示的內容，可以通過外部自定義的方式傳入。
    其實它的實現有一個很嚴重的弊端，就是寫死了top solt和bottom slot的高度為50px，而且js中的處理也是使用50px進行的邏輯處理。所以並滿足我們開發中自定義top slot 和bottom slot的需求。

  • js核心解析

    • props解析
      關於props的解析，可以參考mint-ui的官方文件

    • data解析

      
data() {
  return {
    translate: 0, // 此變數決定當前元件上下移動,
    scrollEventTarget: null, // 滾動的dom節點
    containerFilled: false, // 當前滾動的內容是否填充完整,不完成會呼叫 loadmore的回撥函式
    topText: '', // 下拉重新整理,顯示的文字
    topDropped: false, // 記錄當前drop狀態,用給元件dom新增is-dropped class(添加回到原點的動畫)
    bottomText: '', // 上拉載入更多 顯示的文字
    bottomDropped: false, // 同topDropped
    bottomReached: false, // 當前滾動是否滾動到了底部
    direction: '', // touch-move過程中, 當前滑動的方向
    startY: 0, // touch-start 起始的y的座標值
    startScrollTop: 0, // touch-start 起始的滾動dom的 scrollTop
    currentY: 0, // touch-move 過程中的 y的座標
    topStatus: '', // 下拉重新整理的狀態: pull(下拉) drop(釋放) loading(正在載入資料)
    bottomStatus: '' // 上拉載入更多的狀態: 狀態同上
  };
}

      上面的關於每個data資料的具體作用通過註釋做了詳細說明。

    • watch解析

      watch: {
  topStatus(val) {
    this.$emit('top-status-change', val);
    switch (val) {
      case 'pull':
        this.topText = this.topPullText;
        break;
      case 'drop':
        this.topText = this.topDropText;
        break;
      case 'loading':
        this.topText = this.topLoadingText;
        break;
    }
  },

  bottomStatus(val) {
    this.$emit('bottom-status-change', val);
    switch (val) {
      case 'pull':
        this.bottomText = this.bottomPullText;
        break;
      case 'drop':
        this.bottomText = this.bottomDropText;
        break;
      case 'loading':
        this.bottomText = this.bottomLoadingText;
        break;
    }
  }
}

      上面是元件通過watch監聽的兩個變數，後面我們能看到他們的改變是在touchmove事件中進行處理改變的。它的作用是通過它的變化來改變top slot和bottom slot的文字內容；
      同時發出status-change事件給外部使用，因為可能外部自定義top slot 和bottom slot的內容，通過此事件來通知外部當前狀態以便外部進行處理。

    • 核心函式的解析
      這裡就不將所有的method列出，下面就根據處理的所以來解析對應的method函式。
      首先，入口是在元件mounted生命週期的鉤子回撥中執行init函式

      mounted() {
  this.init();// 當前 vue component掛載完成之後, 執行init()函式
}

      init函式：

      init() {
    this.topStatus = 'pull';
    this.bottomStatus = 'pull';
    this.topText = this.topPullText;
    this.scrollEventTarget = this.getScrollEventTarget(this.$el); // 獲取滾動的dom節點
    if (typeof this.bottomMethod === 'function') {
      this.fillContainer(); // 判斷當前滾動內容是否填滿,沒有執行外部傳入的loadmore回撥函式載入資料
      this.bindTouchEvents(); // 為當前元件dom註冊touch事件
    }
    if (typeof this.topMethod === 'function') {
      this.bindTouchEvents();
    }
  },

  fillContainer() {
    if (this.autoFill) {
      this.$nextTick(() => {
        if (this.scrollEventTarget === window) {
          this.containerFilled = this.$el.getBoundingClientRect().bottom >=
            document.documentElement.getBoundingClientRect().bottom;
        } else {
          this.containerFilled = this.$el.getBoundingClientRect().bottom >=
            this.scrollEventTarget.getBoundingClientRect().bottom;
        }
        if (!this.containerFilled) { // 如果沒有填滿內容, 執行loadmore的操作
          this.bottomStatus = 'loading';
          this.bottomMethod();// 呼叫外部的loadmore函式,載入更多資料
        }
      });
    }
  }

      init函式主要是初始化狀態和事件的一些操作，下面著重分析touch事件的回撥函式的處理。
      首先touchstart事件回撥處理函式

        handleTouchStart(event) {
    this.startY = event.touches[0].clientY; // 手指按下的位置, 用於下面move事件計算手指移動的距離
    this.startScrollTop = this.getScrollTop(this.scrollEventTarget); // 起始scroll dom的 scrollTop(滾動的距離)
    //下面重置狀態變數
    this.bottomReached = false;
    if (this.topStatus !== 'loading') {
      this.topStatus = 'pull';
      this.topDropped = false;
    }
    if (this.bottomStatus !== 'loading') {
      this.bottomStatus = 'pull';
      this.bottomDropped = false;
    }
  }

      主要是記錄初始位置和重置狀態變數。
      下面繼續touchmove的回撥處理函式

        handleTouchMove(event) {
    //確保當前touch節點的y的位置,在當前loadmore元件的內部
    if (this.startY < this.$el.getBoundingClientRect().top && this.startY > this.$el.getBoundingClientRect().bottom) {
      return;
    }
    this.currentY = event.touches[0].clientY;
    let distance = (this.currentY - this.startY) / this.distanceIndex;
    this.direction = distance > 0 ? 'down' : 'up';
    // 下拉重新整理,條件(1.外部傳入了重新整理的回撥函式 2.滑動方向是向下的 3.當前滾動節點的scrollTop為0 4.當前topStatus不是loading)
    if (typeof this.topMethod === 'function' && this.direction === 'down' &&
      this.getScrollTop(this.scrollEventTarget) === 0 && this.topStatus !== 'loading') {
      event.preventDefault();
      event.stopPropagation();
      //計算translate(將要平移的距離), 如果當前移動的距離大於設定的最大距離,那麼此次這次移動就不起作用了
      if (this.maxDistance > 0) {
        this.translate = distance <= this.maxDistance ? distance - this.startScrollTop : this.translate;
      } else {
        this.translate = distance - this.startScrollTop;
      }
      if (this.translate < 0) {
        this.translate = 0;
      }
      this.topStatus = this.translate >= this.topDistance ? 'drop' : 'pull';// drop: 到達指定的閾值,可以執行重新整理操作了
    }

    // 上拉操作, 判斷當前scroll dom是否滾動到了底部
    if (this.direction === 'up') {
      this.bottomReached = this.bottomReached || this.checkBottomReached();
    }
    if (typeof this.bottomMethod === 'function' && this.direction === 'up' &&
      this.bottomReached && this.bottomStatus !== 'loading' && !this.bottomAllLoaded) {
      event.preventDefault();
      event.stopPropagation();
      // 判斷的邏輯思路同上
      if (this.maxDistance > 0) {
        this.translate = Math.abs(distance) <= this.maxDistance
          ? this.getScrollTop(this.scrollEventTarget) - this.startScrollTop + distance : this.translate;
      } else {
        this.translate = this.getScrollTop(this.scrollEventTarget) - this.startScrollTop + distance;
      }
      if (this.translate > 0) {
        this.translate = 0;
      }
      this.bottomStatus = -this.translate >= this.bottomDistance ? 'drop' : 'pull';
    }
    this.$emit('translate-change', this.translate);
  }

      上面的程式碼邏輯挺簡單，註釋也就相對不多。
      重點談一下checkBottomReached()函式，用來判斷當前scroll dom是否滾動到了底部。

        checkBottomReached() {
    if (this.scrollEventTarget === window) {
      return document.body.scrollTop + document.documentElement.clientHeight >= document.body.scrollHeight;
    } else {
      return this.$el.getBoundingClientRect().bottom <= this.scrollEventTarget.getBoundingClientRect().bottom + 1;
    }
  }

      經過我的測試，上面的程式碼是有問題:
      當scrollEventTarget是window的條件下，上面的判斷是不對的。因為document.body.scrollTop總是比正常值小1，所以用於無法滿足到達底部的條件；
      當scrollEventTarget不是window的條件下，上面的判斷條件也不需要在this.scrollEventTarget.getBoundingClientRect().bottom後面加1，但是加1也不會有太大視覺上的影響。
      最後來看下moveend事件回撥的處理函式

        handleTouchEnd() {
    if (this.direction === 'down' && this.getScrollTop(this.scrollEventTarget) === 0 && this.translate > 0) {
      this.topDropped = true; // 為當前元件新增 is-dropped class(也就是新增動畫處理)
      if (this.topStatus === 'drop') { // 到達了loading的狀態
        this.translate = '50'; // top slot的高度
        this.topStatus = 'loading';
        this.topMethod(); // 執行回撥函式
      } else { // 沒有到達,回撥原點
        this.translate = '0';
        this.topStatus = 'pull';
      }
    }
    // 處理邏輯同上
    if (this.direction === 'up' && this.bottomReached && this.translate < 0) {
      this.bottomDropped = true;
      this.bottomReached = false;
      if (this.bottomStatus === 'drop') {
        this.translate = '-50';
        this.bottomStatus = 'loading';
        this.bottomMethod();
      } else {
        this.translate = '0';
        this.bottomStatus = 'pull';
      }
    }
    this.$emit('translate-change', this.translate);
    this.direction = '';
  }
}

相關推薦

vue mint-ui原始碼解析之loadmore元件

元件的template html <div class="mint-loadmore"> <div class="mint-loadmore-content" :class="{ 'is-dropped': topDropped || bottomDropped}" :sty

Flume-ng原始碼解析之Channel元件

如果還沒看過Flume-ng原始碼解析之啟動流程，可以點選Flume-ng原始碼解析之啟動流程 檢視 1 介面介紹 元件的分析順序是按照上一篇中啟動順序來分析的，首先是Channel，然後是Sink，最後是Source，在開始看元件原始碼之前我們先來看一下兩個重要的介面，一

vue+mint-ui 下拉元件loadmore踩坑

mint-ui是vue開發中常用的元件庫，而loadmore 通常用於處理下拉載入與上拉載入 坑1、頁面渲染完，loadmore設定的上拉/下拉執行兩次 產生原因：loadmore設定中的auto-fill需要設定為false 實現程式碼如下： <load-mor

Vue原始碼解析之nextTick

Vue原始碼解析之nextTick 前言 nextTick是Vue的一個核心功能，在Vue內部實現中也經常用到nextTick。但是，很多新手不理解nextTick的原理，甚至不清楚nextTick的作用。 那麼，我們就先來看看nextTick是什麼。 nextTick功能 看看

vue 原始碼解析 之 data的省略用法

var vu = new vue( { data() { name: kk age: 123 } }) vue中獲取 name 有如下幾種寫法, 1 vu.name 2 vu.$data.name 其實他們實際都是獲取的 vu._data.name 第一種的原始碼在 function initDa

Vue原始碼解析之陣列變異

力有不逮的物件 眾所周知，在 Vue 中，直接修改物件屬性的值無法觸發響應式。當你直接修改了物件屬性的值，你會發現，只有資料改了，但是頁面內容並沒有改變。 這是什麼原因？ 原因在於： Vue 的響應式系統是基於Object.defineProperty這個方法的，該方法可以監聽物件中某個元素的獲取或修改

Vue原始碼解析之陣列變異的實現

眾所周知，在 Vue 中，直接修改物件屬性的值無法觸發響應式。當你直接修改了物件屬性的值，你會發現，只有資料改了，但是頁面內容並沒有改變。 這是什麼原因？ 原因在於： Vue 的響應式系統是基於Object.defineProperty這個方法的，該方法可以監聽物件中某個元素的獲取或修改，經過了該方法處理

VUE mint-ui mt-loadmore 上拉載入

<template> <div> <mt-loadmore :bottom-method="loadBottom" :bottom-all-loade

springmvc原始碼解析之元件介紹

浪費了“黃金五年”的Java程式設計師，還有救嗎？ >>>   

Android框架原始碼解析之（四）Picasso

這次要分析的原始碼是 Picasso 2.5.2 ，四年前的版本，用eclipse寫的，但不影響這次我們對其原始碼的分析 地址：https://github.com/square/picasso/tree/picasso-parent-2.5.2 Picasso的簡單使用

Android框架原始碼解析之（三）ButterKnife

注：所有分析基於butterknife:8.4.0 原始碼目錄：https://github.com/JakeWharton/butterknife 其中最主要的3個模組是： Butterknife註解處理器https://github.com/JakeWharton/

Android框架原始碼解析之（二）OKhttp

原始碼在：https://github.com/square/okhttp 包實在是太多了，OKhttp核心在這塊https://github.com/square/okhttp/tree/master/okhttp 直接匯入Android Studio中即可。 基本使用：

Android框架原始碼解析之（一）Volley

前幾天面試CVTE，HR面掛了。讓內部一個學長幫我查看了一下面試官評價，發現二面面試官的評價如下： 廣度OK，但缺乏深究能力，深度與實踐不足 原始碼：只能說流程，細節程式碼不清楚，retrofit和volley都是。 感覺自己一方面：自己面試技巧有待提高吧（框

Android原始碼解析之應用程式資源管理器（Asset Manager）的建立過程分析

轉載自：https://blog.csdn.net/luoshengyang/article/details/8791064 我們分析了Android應用程式資源的編譯和打包過程，最終得到的應用程式資源就與應用程式程式碼一起打包在一個APK檔案中。Android應用程式在執行的過程中，是通過一個

Spring-web原始碼解析之Filter-OncePerRequestFilter

轉自：  http://blog.csdn.net/ktlifeng/article/details/50630934 基於4.1.7.RELEASE 我們先看一個filter-mapping的配置 

spring原始碼解析之AOP原理

一、準備工作 　　在這裡我先簡單記錄下如何實現一個aop： AOP：【動態代理】 指在程式執行期間動態的將某段程式碼切入到指定方法指定位置進行執行的程式設計方式； 1、匯入aop模組；Spring AOP：(spring-aspects) 2、定義一個業務邏輯類（

Dubbo原始碼解析之服務端接收訊息

準備 dubbo 版本：2.5.4 服務端接收訊息流程 Handler鏈路 DubboProtocol private ExchangeServer createServer(URL url) { url = url.addParameterIfAbsent("c

Dubbo原始碼解析之服務釋出與註冊

準備 dubbo版本：2.5.4 Spring自定義擴充套件 dubbo 是基於 spring 配置來實現服務釋出，並基於 spring 的擴充套件機制定義了一套自定義標籤，要實現自定義擴充套件， spring 中提供了 NamespaceHandler 、BeanDefinit

MyBatis原始碼解析之日誌記錄

一 .概述 MyBatis沒有提供日誌的實現類，需要接入第三方的日誌元件，但第三方日誌元件都有各自的Log級別，且各不相同，但MyBatis統一提供了trace、debug、warn、error四個級別； 自動掃描日誌實現，並且第三方日誌外掛載入優先順序如下：slf4J → commonsLoging →

MyBatis原始碼解析之資料來源（含資料庫連線池簡析）

一.概述： 常見的資料來源元件都實現了javax.sql.DataSource介面； MyBatis不但要能整合第三方的資料來源元件，自身也提供了資料來源的實現； 一般情況下，資料來源的初始化過程引數較多，比較複雜； 二.設計模式： 為什麼要使用工廠模式     資料來