前言
现在网上 下拉刷新,上拉加载 插件一搜一大堆,如果你想用在生产环境,那你可以直接网上搜一个靠谱的,我所做的就是不依赖任何插件,一步一步把这个插件的过程写一下,各位同学可以在此基础上定制,没有写过插件的,可以了解下插件怎么写的,整个过程定位入门级,看不懂?那么百度插件直接用就好了,修炼一段时间在考虑怎么写插件吧。废话不多说,上效果图
原理
下拉刷新的原理就是,添加一个 div,这个 div 里面标识加载的过程,根据拉下的距离改变div的高度,从而显示 下拉加载 的文字,松手后根据下拉的距离,判断是否请求数据
构建过程
定义默认的一些配置项
var defaults = {
threshold: 100, // 滑动触发下拉刷新的距离
stop: 40, // 下拉刷新时停留的位置距离屏幕顶部的距离
dis: 20 // 距离屏幕底端触发 上拉加载 的距离
}
定义构造函数
function JrRefresh (el, options) {
this.options = Object.assign({}, defaults, options) // 合并参数
this.el = typeof el === ‘string‘ ? document.querySelector(el) : el // 定义要操作对象
this.progress = null // 下拉刷新显示的 dom
this.loadMore = null // 上拉加载显示的 dom
this.progressHeight = 0 // 下拉刷新的 dom 的高度
this.rotate = null // 下拉刷新 转圈 的角度
this.touchstartY = 0 // 触摸到屏幕的坐标起始 Y 值
this.currentY = 0 // 移动时实时记录的坐标 Y 值
this.isAnimation = false // 是否在自动回滚
this.isRefresh = false // 是否正在刷新数据
this.isLoadMore = false // 是否正在加载数据
this.hasMore = true // 是否有更多数据, 下拉加载会用
this.rotateTimer = null // 控制 下拉刷新 转圈 的时间计时器
this.event()
this.init()
}
初始化,添加一些需要用到的 dom 元素
JrRefresh.prototype.init = function () {
// 增加下拉刷新的显示
var refreshHtml = `<div class="jrscroll-downwarp jrscroll-downwarp-reset" style="height: 0px;"><div class="downwarp-content"><p class="downwarp-progress" style="transform: rotate(0deg);"></p ><p class="downwarp-tip">下拉刷新</p ></div></div>`
var divm = document.createElement(‘div‘)
divm.innerHTML = refreshHtml
this.progress = divm.children[0]
this.el.prepend(this.progress)
// 增加上拉加载的显示
var loadMoreHtml = `<div class="jrscroll-upwarp" style="visibility: hidden;"><p class="upwarp-progress"></p><p class="upwarp-tip">加载中...</p></div>`
var div = document.createElement(‘div‘)
div.innerHTML = loadMoreHtml
this.loadMore = div.children[0]
this.el.appendChild(this.loadMore)
}
定义事件,解释一下这里用到的 bind 吧,这里的 JrRefresh.prototype.pullDown、JrRefresh.prototype.touchend 等函数里的 this 绑定到 JrRefresh 的构造函数上, 如果不用的话,pullDown 函数是由 this.el 调用的,this 会指向 this.el。(假装你们都懂了?)这是写插件常用到一种绑定 this 的方法之一
JrRefresh.prototype.event = function () {
this.el.addEventListener(‘touchstart‘, this.handleTouchStart.bind(this))
this.el.addEventListener(‘touchmove‘, this.pullDown.bind(this))
this.el.addEventListener(‘touchend‘, this.touchend.bind(this))
window.addEventListener(‘scroll‘, this.handleScroll.bind(this))
}
手指触摸时记录Y值坐标,用来判断是向上滑还是向下
JrRefresh.prototype.handleTouchStart = function (e) {
// 记录手指触摸屏幕的 Y 值坐标
this.touchstartY = e.changedTouches[0].clientY
}
手指开始滑动时,触发 pullDown 事件,用 this.currentY 来记录实时的 Y 值坐标,当 this.currentY - this.touchstartY > 0 时,说明是手指向下滑动,这里面 e.preventDefault() 是为了防止微信还有 ios 的浏览器下拉时顶部出现出现默认的黑色空白,或者触发 uc 等浏览器自带的下拉刷新, 由 this.moveDown 专门来控制 下拉刷新显示的dom(this.progress) 的高度
JrRefresh.prototype.pullDown = function (e) {
var scrollTop = document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop
this.currentY = e.targetTouches[0].clientY
if (this.currentY - this.touchstartY >= 0 && scrollTop <= 0) {
e.preventDefault()
if (!this.isAnimation && !this.isRefresh) {
this.moveDown(this.currentY - this.touchstartY)
}
}
}
moveDown 函数是用来专门控制 this.progress 的高度,rotateProgress 函数用来专门控制圈圈的旋转角度 changeProgressState 函数用来专门控制this.progress 显示内容
JrRefresh.prototype.moveDown = function (dis) {
if (dis < this.options.threshold) {
this.progress.style.height = this.progressHeight + dis + ‘px‘
this.rotateProgress(dis*2)
this.changeProgressState(‘下拉刷新‘)
} else {
// 当滑动距离超过 threshold 时,放慢下拉速度
var aftDis = this.options.threshold + (dis - this.options.threshold) / 3
var aftAngle = this.options.threshold * 2 + (dis - this.options.threshold) / 1.7
this.progress.style.height = this.progressHeight + aftDis + ‘px‘
this.rotateProgress(aftAngle)
this.changeProgressState(‘释放刷新‘)
}
}
圈圈只有两种情况,一种随手指移动,超过距离转圈速度变慢,一种是自己不停转,前一种情况,手指下滑距离跟旋转角度的比例并不一定按我这个写法,主要有一点,就是转动变慢时候,圈圈旋转角度不要出现突变,这也是这个插件的难点之一,不懂的同学多看多想哈
JrRefresh.prototype.rotateProgress = function (rotate) {
var rotateDom = this.progress.querySelector(‘.downwarp-progress‘)
if (rotate != undefined) {
rotateDom.style.transform = ‘rotate(‘ + rotate + ‘deg)‘
this.rotate = rotate
} else {
var t = 0;
this.rotateTimer = setInterval(() => {
t++
var angle = (this.rotate + t*15) % 360
rotateDom.style.transform = ‘rotate(‘ + angle + ‘deg)‘
rotateDom.style.WebkitTransform = ‘rotate(‘ + angle + ‘deg)‘
}, 16)
}
}
changeProgressState 这个函数没什么好说的了
JrRefresh.prototype.changeProgressState = function (name) {
this.progress.querySelector(‘.downwarp-tip‘).innerHTML = name
}
至此,下滑效果有点样子了,下面是手指松开时候的逻辑
JrRefresh.prototype.touchend = function () {
var scrollTop = document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop
if (scrollTop > 0 || this.isRefresh|| this.isAnimation) return //只有 1.在屏幕顶部 2.已完成请求数据 3.不在回滚 三条都满足才进行处理
if ((this.currentY - this.touchstartY) > this.options.threshold) {
this.options.downCallback() // 触发参数穿过来的请求数据
this.isRefresh = true
this.moveBack(this.options.stop) // 下拉刷新时停留的位置距离屏幕顶部的距离
} else {
this.moveBack()
}
}
moveBack 函数专门把进度返回到对应位置
JrRefresh.prototype.moveBack = function (dis) {
var dis = dis || 0;
this.isAnimation = true // 正在回退
var currentHeight = this.progress.offsetHeight
var t = 0, // 进行的步数
b = 10, // 总步数
c = (currentHeight - dis)/b // 每一步的距离
var timer = setInterval(() => {
t++;
this.progress.style.height = currentHeight - c * t + ‘px‘
if (t == b) {
if (dis === 0) {
this.changeProgressState(‘下拉刷新‘)
this.progressHeight = 0
} else {
this.changeProgressState(‘正在刷新‘)
this.progressHeight = this.options.stop
this.rotateProgress()
}
this.touchstartY = ‘‘
this.isAnimation = false // 回退完成
clearInterval(timer)
}
}, 16)
}
当请求数据完成,要回滚到原始位置,参数是 boolean 类型,表明有没有更多数据
JrRefresh.prototype.endSuccess = function (bool) {
if (this.isRefresh) { // 如果是正在刷新数据
this.changeProgressState(‘刷新成功‘)
if (bool) {
setTimeout(() => { //延迟 500ms 回滚
this.moveBack(0)
this.isRefresh = false
clearInterval(this.rotateTimer)
},500)
} else {
this.toggleLoadingText(true)
}
}
if (this.isLoadMore) { // 如果是正在加载数据
this.isLoadMore = false
this.loadMore.style.visibility = ‘hidden‘
this.toggleLoadingText(bool)
}
}
JrRefresh.prototype.toggleLoadingText = function (hasMore) {
if (hasMore) {
this.loadMore.querySelector(‘.upwarp-tip‘).innerHTML = ‘加载中...‘
this.loadMore.querySelector(‘.upwarp-progress‘).style.display = ‘inline-block‘
} else {
this.loadMore.style.visibility = ‘visible‘
this.loadMore.querySelector(‘.upwarp-tip‘).innerHTML = ‘没有更多数据了‘
this.loadMore.querySelector(‘.upwarp-progress‘).style.display = ‘none‘
}
}
至此,下拉刷新的逻辑终于完成了,下面开始上拉加载,比较麻烦的是获取页面高度,数据过来的同时请求页面高度,页面还没有渲染完成,页面高度可能会不准,所以我处理方法是延迟100ms 获取高度,
JrRefresh.prototype.handleScroll = function () {
var top = this.loadMore.getBoundingClientRect().top; // 获取最底部标签距离屏幕顶部的距离
if (top + 10 < window.innerHeight && !this.isLoadMore && this.hasMore) {
this.isLoadMore = true
this.loadMore.style.visibility = ‘visible‘
this.options.up.callback()
}
}
用法
<div class="jrscroll">
//列表内容,如:<ul>列表数据</ul> ..
</div>
<script>
var scroll = new JrRefresh(scrollWrap, {
downCallback: pullDownRefresh,
upCallback: pullUpLoadMore
})
function pullDownRefresh() {
setTimeout(() => {
console.log(‘刷新成功‘)
// 处理数据
scroll.endSuccess(true)
}, 1000)
}
function pullUpLoadMore() {
setTimeout(() => {
console.log(‘请求成功‘)
// 处理数据
scroll.endSuccess(true)
}, 2000)
}
</script>
好了,大致就介绍这么多,想看源码的同学,移步这里,后续的完善和更新也会在 github 上,有兴趣的同学 star 或者 fork 哦