页面上拉刷新下拉加载实现

如何在手机端页面实现上拉刷新下拉加载的效果

今日看了一篇实现的文章上拉加载下拉刷新了解下根据文章进行一些补充

实现的思路

上拉刷新

当前页面在屏幕中的滑动距离大于一定值
页面滑动的距离 > document.body.scrollTop

下拉加载

当前页面滑动的到底部
document.body.scrollTop + document.body.clientHeight >= $el.scrollHeight

• 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
}

• 2. 添加监听事件

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 )

// 注意不用的时候销毁事件

• 3. 具体实现

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'
 }
}

}