最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

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

10年積累的成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先制作網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有柯坪免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

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

上拉加載是point指針touch觸摸事件，現(xiàn)在因?yàn)槭腔瑒?dòng)加載，需要添加scroll事件去監(jiān)聽然后執(zhí)行相應(yīng)回調(diào)

上拉加載主要計(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之和，就加載下一頁(yè)
   if ((rect.bottom <= viewHeight + this.distance) && this.loadable && !this.loading) {
   this.load()
   }
  }
  },

源碼如下：

以上所述是小編給大家介紹的vue loadmore 組件滑動(dòng)加載更多源碼解析，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！