如何在手机端页面实现上拉刷新下拉加载的效果
今日看了一篇实现的文章上拉加载下拉刷新了解下根据文章进行一些补充
实现的思路
上拉刷新
当前页面在屏幕中的滑动距离大于一定值
页面滑动的距离 > 阀值
三步：
- 监听原生的touchstart事件， 记录其初始位置的值， e.touches[0].pageY
- 监听原生的touchmove事件，记录并计算当前滑动的位置与初始位置的差值， 大于0表示向下拉动，并做相应的提示； 借助translateY让元素向下滑动
- 监听原生的touchend事件， 若此时元素滑动到最大值，则触发接口调用，同时设置translateY为0，元素回到初始位置
下拉加载
当前页面滑动的到底部
document.body.scrollTop + document.body.clientHeight >= document.body.scrollHeight
window.onscroll 事件监听， 设置节流函数，性能优化
- 1.HTML布局，顶部预留“下拉刷新”的文字块，底部预留‘加载中’的文字块
<header />
<div class='content' id='content'>
<div class="topBar" id="topBar" style="top: 0"></div>
<ul>....</ul> //文章列表
<div class="bottomBar" id="bottomBar"></div>
</div>
// css
header{
position: fixed;
line-height: 50px;
z-index: 2;
}
.content{
position: absolute;
widht: 100%;
}
.bottomBar{
display:none
}
- 添加监听事件
var content = document.getElementById('content')
var topBar= document.getElementById('topBar')
var bottomBar = document.getElementById('bottomBar ')
content.addEventListener('touchstart', refreshTouchStart )
content.addEventListener('touchmove', refreshTouchMove )
content.addEventListener('touchend', refreshTouchEnd )
// 注意不用的时候销毁事件
- 具体实现
var startY //当前按下的纵坐标
var move = 0 // 记录滑动的距离
var scrollTop // 记录当前的滑动位置
var isMoreData=flase // 是否加载数据的标志
// touchstart
function refreshTouchStart(e) {
var touch = e.touches[0]
// 记录当前的滑动位置
scrollTop = document.body.scrollTop || document.documentElement.scrollTop
// 记录当前按下的纵坐标
startY = touch.clientY
}
// touchmove
function refreshTouchMove(e) {
var touch = e.touches[0]
// 记录滑动的距离
move = touch.clientY - startY
// move > 0 表示向下拉
// move 一定要大于scrollTop,而不是0，因为有时候是在页面有滚动条的情况下滑动
// 设置< 1000，是避免无限制的下拉
if( move > scrollTop && move < 1000 ) {
// 设置$("#content")的top值
content.style.top = move - scrollTop + 'px'
// 当滑动距离超过一定值 时， 文字内容变化
if( move > 80 ) {
topBar.textContent = "松开刷新"
}
}
// 下拉到底，加载数据
if((document.body.scrollTop + document.body.clientHeight ) >= content.scrollHeight) {
console.log('滑动到底部了')
// 让底部bar显示
bottomBar.style.display = 'block'
isMoreData = true
}
}
// touchEnd
function refreshTouchEnd() {
// 如果top 大于 一定值，发送刷新请求
if( parseFloat(el.style.top) >= 80 ) {
topBar.textContent = '页面刷新中。。。'
// 发送刷新请求
。。。
// 回到原位，我的思路是，top 先回到一定值，
// 然后采用定时器。过渡性回到原位
content.style.top = '80px'
vat elTop = content.style.top //缓存top值
var timer = setInterval(function(){
elTop = parseFloat(elTop) - 5 + 'px'
content.style.top = elTop //重新赋值
// 如果top <= 0,则清除定时器，并回归初始化
if(parseFloat(content.style.top) <= 0){
clearInterval(timer)
content.style.top = 0
topBar.textContent = '下拉刷新'
}
},30)
}
// 当 滑动的距离 大于 0 但是不满足 于重新刷新时
if(parseFloat(content.style.top) > 0 && parseFloat(content.style.top) < 80) {
content.style.top = 0
}
if(isMoreData) {
// 发送加载更多数据的请求
API.getMoreData().then(data){
// 成功后，让bottomBar 隐藏
bottomBar.style.display = 'none'
isMoreData = false
}.catch(e){
bottomBar.style.display = 'none'
}
}
}
