首先說一下實現(xiàn)原理：
下拉刷新
實現(xiàn)下拉刷新主要分為三步：
監(jiān)聽原生touchstart事件放棒，記錄其初始位置的值姻报，e.touches[0].pageY；
監(jiān)聽原生touchmove事件间螟，記錄并計算當前滑動的位置值與初始位置值的差值吴旋，大于0表示向下拉動，并借助CSS3的translateY屬性使元素跟隨手勢向下滑動對應的差值厢破，同時也應設置一個允許滑動的最大值荣瑟；
監(jiān)聽原生touchend事件，若此時元素滑動達到最大值摩泪，則觸發(fā)對應的callback笆焰，同時將translateY重設為0，元素回到初始位置见坑。
觸底加載更多
當網(wǎng)頁向上卷曲出去的高度+瀏覽器高度=網(wǎng)頁正文高度的時候嚷掠，判定為網(wǎng)頁已經(jīng)觸底捏检。
下面直接上代碼
CSS代碼
#refreshContainer li {
background-color: #eee;
margin-bottom: 1px;
padding: 20px 10px;
}
.refreshText {
position: absolute;
width: 100%;
line-height: 50px;
text-align: center;
left: 0;
top: 0;
}
HTML代碼
<p class="refreshText"></p>
<ul id="refreshContainer">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
JS代碼
(function (window, document, undefined) {
var upDownRefresh = function (box, text) {
var _element = document.getElementById(box),
_refreshText = document.querySelector(text),
_startPos = 0,
_transitionHeight = 0;
_element.addEventListener('touchstart', function (e) {
console.log('初始位置：', e.touches[0].pageY);
_startPos = e.touches[0].pageY;
_element.style.position = 'relative';
_element.style.transition = 'transform 0s';
}, false);
_element.addEventListener('touchmove', function (e) {
// console.log('當前位置：', e.touches[0].pageY);
_transitionHeight = e.touches[0].pageY - _startPos;
console.log(_transitionHeight)
if (_transitionHeight > 0 && _transitionHeight < 60) {
_refreshText.innerText = '下拉刷新';
_element.style.transform = 'translateY(' + _transitionHeight + 'px)';
}
}, false);
_element.addEventListener('touchend', function (e) {
if (_transitionHeight > 55) {
_refreshText.innerText = '更新中...';
console.log("觸發(fā)更新")
}
_element.style.transition = 'transform 0.5s ease 1s';
_element.style.transform = 'translateY(0px)';
}, false);
}
window.upDownRefresh = upDownRefresh;
})(window, document);
new upDownRefresh("refreshContainer", ".refreshText")
如果我們要監(jiān)聽的是整個頁面的觸底，則通過以下代碼就可以
window.onscroll = function () {
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
if (scrollTop + windowHeight == scrollHeight) {
console.log('觸底加載更多')
}
}
一定要完全觸底才觸發(fā)加載更多的事件會顯得不那么友好不皆，我們可以設置一個距離范圍
window.onscroll = function () {
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
if (scrollTop + windowHeight + 40 >= scrollHeight) {
console.log('觸底加載更多')
}
}
但是這樣寫有一個很大的缺點就是只要進入到了這個距離范圍贯城，觸底事件就會一直觸發(fā)，即使此時頁面是向上滑動的霹娄，只要還是在40這個距離范圍內滑動能犯，都會觸發(fā)觸底事件，這不是我們想要的项棠，接下來對代碼進行優(yōu)化：
let flag = ''
window.onscroll = function () {
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
if (flag === '' || flag === 'open') {
if (scrollTop + windowHeight + 100 >= scrollHeight) {
console.log('觸底加載更多')
// 觸發(fā)了一次后閥門關閉
flag = 'close'
}
}
if (scrollTop + windowHeight + 100 < scrollHeight && (flag === '' || flag === 'close')) {
console.log('開啟閥門')
flag = 'open'
}
}
如果我們需要實現(xiàn)的是某個元素的觸底加載更多悲雳，則需要另外的實現(xiàn)方式：
樣式方面不多贅述，滾動區(qū)域是給固定高度香追，設置 overflow-y: auto 來實現(xiàn)合瓢。
接下來看看js方面的實現(xiàn)，其實也很簡單透典，觸發(fā)的條件是：可視高度 + 滾動距離 >= 實際高度 晴楔。例子我會使用vue來實現(xiàn)，和原生實現(xiàn)是一樣的峭咒。
- 可視高度(offsetHeight)：通過 dom 的 offsetHeight 獲得税弃，表示區(qū)域固定的高度。這里我推薦通過 getBoundingClientRect() 來獲取高度凑队，因為使用前者會引起瀏覽器回流则果，造成一些性能問題。
- 滾動高度(scrollTop)：滾動事件中通過 e.target.scrollTop 獲取漩氨，表示滾動條距離頂部的px
- 實際高度(scrollHeight)：通過 dom 的 scrollHeight 獲得西壮，表示區(qū)域內所有內容的高度（包括滾動距離），也就是實際高度
基礎實現(xiàn)
onScroll(e) {
let scrollTop = e.target.scrollTop
let scrollHeight = e.target.scrollHeight
let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height)
let currentHeight = scrollTop + offsetHeight
if (currentHeight >= scrollHeight) {
console.log('觸底')
}
}
加點細節(jié):
加點細節(jié)叫惊，現(xiàn)在我們希望是離底部一定距離就觸發(fā)事件款青，而不是等到完全觸底。如果你做過小程序霍狰，這和onReachBottom差不多的意思抡草。
聲明一個離底部的距離變量reachBottomDistance
這時候觸發(fā)條件：可視高度 + 滾動距離 + reachBottomDistance >= 實際高度
export default {
data(){
return {
reachBottomDistance: 100
}
},
methods: {
onScroll(e) {
let scrollTop = e.target.scrollTop
let scrollHeight = e.target.scrollHeight
let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height)
let currentHeight = scrollTop + offsetHeight + this.reachBottomDistance
if (currentHeight >= scrollHeight) {
console.log('觸底')
}
}
}
}
在距離底部100px時成功觸發(fā)事件，但由于100px往下的區(qū)域是符合條件的蔗坯，會導致一直觸發(fā)康震，這不是我們想要的。
接下來做一些處理宾濒，讓其進入后只觸發(fā)一次:
export default {
data(){
return {
isReachBottom: false,
reachBottomDistance: 100
}
},
methods: {
onScroll(e) {
let scrollTop = e.target.scrollTop
let scrollHeight = e.target.scrollHeight
let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height)
let currentHeight = scrollTop + offsetHeight + this.reachBottomDistance
if(currentHeight < scrollHeight && this.isReachBottom){
this.isReachBottom = false
}
if(this.isReachBottom){
return
}
if (currentHeight >= scrollHeight) {
this.isReachBottom = true
console.log('觸底')
}
}
}
}
優(yōu)化:
實時去獲取位置信息稍微會損耗性能腿短，我們應該把不變的緩存起來，只實時獲取可變的部分
export default {
data(){
return {
isReachBottom: false,
reachBottomDistance: 100
scrollHeight: 0,
offsetHeight: 0,
}
},
mounted(){
// 頁面加載完成后 將高度存儲起來
let dom = document.querySelector('.comment-area .comment-list')
this.scrollHeight = dom.scrollHeight
this.offsetHeight = Math.ceil(dom.getBoundingClientRect().height)
},
methods: {
onScroll(e) {
let scrollTop = e.target.scrollTop
let currentHeight = scrollTop + this.offsetHeight + this.reachBottomDistance
if(currentHeight < this.scrollHeight && this.isReachBottom){
this.isReachBottom = false
}
if(this.isReachBottom){
return
}
if (currentHeight >= this.scrollHeight) {
this.isReachBottom = true
console.log('觸底')
}
}
}
}
上面代碼有個坑：scrollHeight會隨著每次觸底數(shù)據(jù)追加而變化，儲存起來影響后續(xù)的比對加載答姥，接下來進行改進。
