建議先看vue瀑布流組件上拉加載更多再來食用本文，如果直接想看源碼文末就是~

10多年的龍華網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整龍華建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“龍華網(wǎng)站設(shè)計(jì)”,“龍華網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

文末新增組件優(yōu)化，之所以沒有刪優(yōu)化前的代碼是想讓以后自己還能看到走過的路。

上一篇講到在項(xiàng)目中使用上拉加載更多組件，但是由于實(shí)際項(xiàng)目開發(fā)中由于需求變更或者說在webview中上拉加載有些機(jī)型在上拉時(shí)候會(huì)把webview也一起上拉導(dǎo)致上拉加載不靈敏等問題，我們有時(shí)候也會(huì)換成滑動(dòng)到底部自動(dòng)加載的功能。

既然都是加載更多，很多代碼思想勢(shì)必相似，主要區(qū)別在于上拉和滑動(dòng)到底部這個(gè)操作上，所以，我們需要注意：

1、上拉加載是point指針touch觸摸事件，現(xiàn)在因?yàn)槭腔瑒?dòng)加載，需要添加scroll事件去監(jiān)聽然后執(zhí)行相應(yīng)回調(diào)
2、上拉加載主要計(jì)算觸摸滾動(dòng)距離，滑動(dòng)加載主要計(jì)算container底部和視窗上邊緣的距離

事件綁定改成：

mounted() {
 ···
 this.dom.addEventListener('scroll', this.scroll, false)
 ···
 },

 beforeDestroy() {
 ···
 this.dom.removeEventListener('scroll', this.scroll, false)
 ···
 },

事件回調(diào)改為：

 /**
 * 滾動(dòng)鉤子
 */
 scroll() {
 const viewHeight = global.innerHeight
 let parentNode
 if (this.container !== global) {
  parentNode = this.$el
 } else {
  parentNode = this.$el.parentNode
 }
 if (parentNode) {
  // 獲取Vue實(shí)例使用的根 DOM 元素相對(duì)于視口的位置
  const rect = parentNode.getBoundingClientRect()
  // this.distance 離底部多少距離開始加載
  // 如果此元素底邊距離視口頂部的距離小于視口高度加上distance之和，就加載下一頁
  if ((rect.bottom <= viewHeight + this.distance) && this.loadable && !this.loading) {
  this.load()
  }
 }
 },

源碼如下：

———————-我是分割線——————–

2017-09-18 組件優(yōu)化

我們?cè)趯懡M件時(shí)候，通常會(huì)大致先分為兩種，業(yè)務(wù)組件和通用組件，業(yè)務(wù)組件通和業(yè)務(wù)邏輯相關(guān)，一般作為一個(gè)業(yè)務(wù)模塊的局部組件， 比如列表中的列表項(xiàng)組件；通用組件適用面廣，不會(huì)和業(yè)務(wù)有牽扯，比如彈出框組件。

所以我們開始封裝一個(gè)組件的時(shí)候，就要?jiǎng)澐謽I(yè)務(wù)邏輯，做什么，不做什么，從外部接收什么，向外部提供什么，這個(gè)邊界應(yīng)該非常清楚

但是之前的封裝的loadmore組件不太符合這一點(diǎn)，可能是項(xiàng)目一開始比較關(guān)注功能的實(shí)現(xiàn)，將其當(dāng)成的一個(gè)業(yè)務(wù)組件撰寫，現(xiàn)在有一點(diǎn)需要優(yōu)化：

之前我們傳入了各種請(qǐng)求相關(guān)的參數(shù)，包括url在組件內(nèi)部完成加載和頁碼控制等一系列操作，顯然這不太符合組件功能職責(zé)單一化的原則， 其實(shí)組件內(nèi)部并不關(guān)心加載到第幾頁或者是需要請(qǐng)求什么后端接口，而只要父組件告訴自己是否還可以加載就可以了， 至于加載請(qǐng)求列表，子組件通知父組件去加載就OK。

最終我們得到一個(gè)和業(yè)務(wù)完全分離的通用組件，代碼如下：

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。