首先定義獲取頁面當前的滾動高度方法：
//滾動條在y軸上的滾動距離
getscrolltop() ,
//文件的總高度
getscrollheight() ,
//瀏覽器視口的高度
getwindowheight() ,
其次對當前頁面的滾動高度進行計算：
//錨點定位
initheight()
else
if(scrolltop > (this.$refs.product_detail_html.offsettop - 60))
else
if(scrolltop > (this.$refs.product_detail_eval.offsettop - 60))
else
//頭部導航背景色漸變
if (scrolltop > 80)
this.showfixed = false
} else
//如果被捲曲的高度大於吸頂元素到頂端位置 的距離
= scrolltop > this.offsettop ? true : false;
if(this
.isscroll)
}},
定義滾動載入的方法：
//下拉載入
loadmoreevadata()
else
},
資料請求的方法定義：
//推薦列表
getrecommenddata()}).then(res=>
this.recommend = this
.recommend.concat(res.recommend);}})
},
在生命週期裡呼叫滾動監聽並對滾動監聽進行解綁：
mounted() ,//離開刪除繫結事件
beforedestroy() )
window.removeeventlistener("scroll",this
.initheight)
},
寫在最後不要忘記在data裡面定義 允許觸底條件，否則滾動監聽無效
isscroll:true, //是否允許觸發觸底事件
移動端H5頁面上拉載入更多功能實現（二）
之前已經寫過一篇關於上拉載入更多的文章，那個主要是根據滾動實現分頁向後台發起請求實現。這次實現方式為後台返回所有需要載入的資料，前端這邊做視覺上的分頁效果。實現原理也是根據滾動距離觸發載入更多的條件。具體 實現如下 getoffsetheight this.receivedstate this.is...
h5 實現頁面上拉載入更多資料
html style部分 html部分 js部分 js部分主要就是監控上拉，調介面 上拉載入更多css style wait loading keyframes waitloading 100 loading loading txt ending style div class loading st...
js頁面中實現載入更多功能
分頁 如何實現載入更多功能，目前的在很多 上使用的載入更多功能中，使用最多的是iscroll.js實現的上拉載入更多 下拉重新整理功能。但是iscroll.js本身並沒有整合載入更多的功能，需要進行自行擴充套件。最簡單的就是給乙個載入更多的按鈕，實現假分頁載入更多，也就是頁面上是全部的資料，只是按照...