<div id="app">  <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :max-distance="150"         @top-status-change="handleTopChange" ref="loadmore">    <div slot="top" class="mint-loadmore-top">      <span v-show="topStatus === 'pull'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>      <span v-show="topStatus === 'loading'">Loading...</span>      <span v-show="topStatus === 'drop'">釋放更新</span>    </div>    <ul class="scroll-wrapper">      <li v-for="item in list" @click="itemClick(item)">{{ item }}</li>    </ul>  </mt-loadmore></div>

<link rel="stylesheet"  rel="external nofollow" >*{  margin: 0;  padding: 0;}html, body{  height: 100%;}#app{  height: 100%;  overflow: scroll;}.scroll-wrapper{  margin: 0;  padding: 0;  list-style: none;}.scroll-wrapper li{  line-height: 120px;  font-size: 60px;  text-align: center;}

<!-- 先引入 Vue --><script src="https://unpkg.com/vue/dist/vue.js"></script><!-- 引入組件庫(kù) --><script src="https://unpkg.com/mint-ui/lib/index.js"></script><script>  new Vue({    el: '#app',    data: {      list: [],      allLoaded: false,      topStatus: ''    },    created: function () {      var i =0, len=20;      for (; i< len; i++){        this.list.push('demo' + i);      }    },    methods: {      loadTop: function () { // 刷新數(shù)據(jù)的操作        var self = this;        setTimeout(function () {          self.list.splice(0, self.list.length);          var i =0, len=20;          for (; i< len; i++){            self.list.push('demo' + i);          }          self.$refs.loadmore.onTopLoaded();        }, 2000);      },      loadBottom: function () { // 加載更多數(shù)據(jù)的操作        //load data        //this.allLoaded = true;// 若數(shù)據(jù)已全部獲取完畢        var self = this;        setTimeout(function () {          var i =0; len = 10;          for (; i< len; i++){            self.list.push('dddd' + i);          }          self.$refs.loadmore.onBottomLoaded();        }, 2000);      },      handleTopChange: function (status) {        this.topStatus = status;      },      itemClick: function (data) {        console.log('item click, msg : ' + data);      }    }  });</script>

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

data() { return {  translate: 0, // 此變量決定當(dāng)前組件上下移動(dòng),  scrollEventTarget: null, // 滾動(dòng)的dom節(jié)點(diǎn)  containerFilled: false, // 當(dāng)前滾動(dòng)的內(nèi)容是否填充完整,不完成會(huì)調(diào)用 loadmore的回調(diào)函數(shù)  topText: '', // 下拉刷新,顯示的文本  topDropped: false, // 記錄當(dāng)前drop狀態(tài),用給組件dom添加is-dropped class(添加回到原點(diǎn)的動(dòng)畫)  bottomText: '', // 上拉加載更多 顯示的文本  bottomDropped: false, // 同topDropped  bottomReached: false, // 當(dāng)前滾動(dòng)是否滾動(dòng)到了底部  direction: '', // touch-move過程中, 當(dāng)前滑動(dòng)的方向  startY: 0, // touch-start 起始的y的坐標(biāo)值  startScrollTop: 0, // touch-start 起始的滾動(dòng)dom的 scrollTop  currentY: 0, // touch-move 過程中的 y的坐標(biāo)  topStatus: '', // 下拉刷新的狀態(tài): pull(下拉) drop(釋放) loading(正在加載數(shù)據(jù))  bottomStatus: '' // 上拉加載更多的狀態(tài): 狀態(tài)同上 };}

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

mounted() { this.init();// 當(dāng)前 vue component掛載完成之后, 執(zhí)行init()函數(shù)}

init() {  this.topStatus = 'pull';  this.bottomStatus = 'pull';  this.topText = this.topPullText;  this.scrollEventTarget = this.getScrollEventTarget(this.$el); // 獲取滾動(dòng)的dom節(jié)點(diǎn)  if (typeof this.bottomMethod === 'function') {   this.fillContainer(); // 判斷當(dāng)前滾動(dòng)內(nèi)容是否填滿,沒有執(zhí)行外部傳入的loadmore回調(diào)函數(shù)加載數(shù)據(jù)   this.bindTouchEvents(); // 為當(dāng)前組件dom注冊(cè)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) { // 如果沒有填滿內(nèi)容, 執(zhí)行l(wèi)oadmore的操作     this.bottomStatus = 'loading';     this.bottomMethod();// 調(diào)用外部的loadmore函數(shù),加載更多數(shù)據(jù)    }   });  } }

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

 handleTouchMove(event) {  //確保當(dāng)前touch節(jié)點(diǎn)的y的位置,在當(dāng)前l(fā)oadmore組件的內(nèi)部  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.外部傳入了刷新的回調(diào)函數(shù) 2.滑動(dòng)方向是向下的 3.當(dāng)前滾動(dòng)節(jié)點(diǎn)的scrollTop為0 4.當(dāng)前topStatus不是loading)  if (typeof this.topMethod === 'function' && this.direction === 'down' &&   this.getScrollTop(this.scrollEventTarget) === 0 && this.topStatus !== 'loading') {   event.preventDefault();   event.stopPropagation();   //計(jì)算translate(將要平移的距離), 如果當(dāng)前移動(dòng)的距離大于設(shè)置的最大距離,那么此次這次移動(dòng)就不起作用了   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: 到達(dá)指定的閾值,可以執(zhí)行刷新操作了  }  // 上拉操作, 判斷當(dāng)前scroll dom是否滾動(dòng)到了底部  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() {  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;  } }

 handleTouchEnd() {  if (this.direction === 'down' && this.getScrollTop(this.scrollEventTarget) === 0 && this.translate > 0) {   this.topDropped = true; // 為當(dāng)前組件添加 is-dropped class(也就是添加動(dòng)畫處理)   if (this.topStatus === 'drop') { // 到達(dá)了loading的狀態(tài)    this.translate = '50'; // top slot的高度    this.topStatus = 'loading';    this.topMethod(); // 執(zhí)行回調(diào)函數(shù)   } else { // 沒有到達(dá),回調(diào)原點(diǎn)    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 = ''; }}