移动端tab滑动和上下拉刷新加载
移动端tab滑动和上下拉刷新加载
查看demo（请在移动端模式下查看）
查看代码
开发该插件的初衷是，在做一个项目时发现现在实现移动端tab滑动的插件大多基于swiper，swiper的功能太强大而我只要一个小小的tab滑动功能，就要引入200+k的js这未免太过浪费。而且swiper是没有下拉刷新功能的，要用swiper实现下拉刷新还得改造一番。在实现功能的同时产生了不少bug。要是在引入一个下拉刷新的插件又难免多了几十kb的js。而且这些插件对dom结构又是有一定要求的，一不小心就有bug。修复bug的时间都可以在撸一个插件出来了。
这次开发的这个插件只依赖手势库touch.js。使用原生实现功能。大小只有6kb。兼容性也算不错。
其实对touch.js的依赖并不严重，只是用了其两个手势事件，花点时间完全可以自己实现的。
插件我只是粗略的测试了一番，若有什么bug请大家提出。有写的不清楚的也请提出
- 该插件基于百度手势库touch.js该改手势库的大小也只有13k不到。官方文档链接是找不到了所以引用别人写的吧：API文档
总结一下这次开发插件的原理和所遇到的坑吧
实现的话主要分为：
- 确定好容器结构
- 捕获滑动的事件（使用touch.js获取滑动的方向、滑动的距离和滑动的速度）
- 实现滑动的效果（这里使用的是transform来实现滑动， transtion来实现动画）
- 确定临界点（根据滑动不同的距离判断是否切换页数，还有根据滑动的速度确定是否切换页数）
- 暴露监听事件（产生不同状态的回调）
坑：
主要体现在微信和ios浏览器对下拉时会有弹簧效果：
这个是浏览器的默认效果，是可以通过“e.preventDefault()”取消默认效果的。不过这就会产生容器不能滚动了。
所以就不能直接e.preventDefault()取消默认效果了。只能在特定的条件下才能取消默认事件。那条件是什么呢？
第一个条件就是滑动方向是向下&&是在容器顶部时候
第二个条件就是滑动方向向下&&在容器底部
在这里touch.js可以轻易的获取滑动的方向，滚动条所在的位置也很容易算出。我已开始也以为很简单的，结果却发现touch.js获取滚动方向是有一定延时的，这就造成第一时间捕获的位置是上一次的，所以出现偶尔可以偶尔不可，有时干脆滚动不了。所以使用touch.js获取方向的方式是不可取的。
只能自己采集触摸屏幕时的坐标，在对比滑动时的坐标取得方向。ok这个bug就这样轻松解决了。这都是在微信上运行的结构，后来拉到uc的时候竟然发现uc连左右滑动都有默认效果（丧尽天良）。
这就只能用老办法解决了，增加两组条件，左右滑动。根据采集的初始点，对比滑动过程的坐标，判断上下滚动还是左右滑动。在取消默认效果。
API：
dom结构：
<div id="box"> <!-- 主容器 -->
<div class="pullDownHtml"> <!-- 下拉刷新的显示内容 -->
<div class="pullDownshow1">下拉刷新</div>
<div class="pullDownshow2">正在刷新</div>
</div>
<div class="pullUpHtml"> <!-- 上拉加载的显示内容 -->
<div class="pullUpHtmlshow1">上拉加载</div>
<div class="pullUpHtmlshow2">正在加载</div>
</div>
<div class="box">
<div class="tab-container">
<div class="s-pull">
// 页面一内容
</div>
</div>
<div class="tab-container">
<div class="s-pull">
// 页面二内容
</div>
</div>
<div class="tab-container">
<div class="s-pull">
// 页面三内容
</div>
</div>
</div>
</div>
1、初始化
var swiper = new TabSwiper(ele, options)
// ele：容器
// options： 参数(Object)
2、options参数
{
speed: 300, // 动画速度
threshold: 100, // 上下拉触发的阀值（px）
xThreshold: 0.3, // 左右滑动触发的阀值（0~1）默认为：‘0.25’
closeInertia: false, // 是否关闭惯性滑动， 默认开启
isPullDown: true, // 是否开启下拉刷新
isPullUp: true, // 是否开启上拉加载
defaultPage: 0, // 默认显示的页数
initCb: function(){}, // 初始化回调
onEnd： function(page){}, // 切换页数时回调(返回当前页数)
onRefreshStart: function(page){}, // 触发下拉刷新时回调(返回当前页数)
onLoadStart: function(page){}, // 触发上拉加载时回调(返回当前页数)
onTouchmove: function(page, e){} // 正在页面上滑动回调(返回当前页数和滑动信息。可通过滑动的信息得到当前滑动的方向速度滑动的距离，进行功能扩展)
}
3、pullEnd(cb)方法:
swiper.pullEnd(function (page) { // 返回当前页数
console.log(page)
})
4、changePage(page)方法:
swiper.changePage(page) // 切换页面page目标页面从0开始
5、nowIndex属性：
var nowIndex = swiper.nowIndex // 获取当前所在页数（只读）
下面是代码（基于es6）
若要查看es5的版本请移步（查看代码）
;(function (window, document) {
// 更改transform
function changeTransform (ele, left, top) {
ele.style.transform = `translate(${left}px, ${top}px)`
ele.style.WebkitTransform = `translate(${left}px, ${top}px)`
}
class TabSwiper {
get nowIndex () {
return this._nowIndex
}
set nowIndex (val) {
if (val === this._nowIndex) return
this._nowIndex = val
this.options.onEnd && this.options.onEnd(val)
}
constructor (ele, options) {
this._nowIndex = 0
this.ele = ele
this.width = ele.clientWidth // 容器宽度
this.height = ele.clientHeight // 容器高度
this.totalWidth = 0 // 总宽度
this.box = ele.querySelector('.box')
this.containers = ele.querySelectorAll('.tab-container') // 容器
this.direction = ''
this.scrollTop = 0
this.options = options // 配置参数
this.prohibitPull = false // 禁止上下拉动操作标记
this.startY = 0 // 起始y坐标
this.startX = 0 // 起始x坐标
this.isBottom = false // 是否在底部
this.disX = 0 // 滑动X差值
this.disY = 0 // 滑动Y差值
this.pullDownHtml = ele.querySelector('.pullDownHtml')
this.pullUpHtml = ele.querySelector('.pullUpHtml')
this.pullDownHtmlHeight = 0 // 下拉的html高度
this.pullUpHtmlHeight = 0 // 上拉的html高度
this.left = 0 // 向左偏移量
// 初始化
this.init()
}
// 初始化
init () {
this.options.xThreshold = this.options.xThreshold || 0.25
// 设置样式
this.ele.style.overflow = 'hidden'
this.ele.style.position = 'relative'
this.box.style.height = '100%'
this.box.style.width = this.containers.length * 100 + 'vw'
this.box.style.float = 'left'
this.box.style.transition = 'all ' + this.options.speed / 1000 + 's'
this.box.style.position = 'relative'
this.box.style.zIndex = 2
this.totalWidth = this.box.clientWidth;
[].forEach.call(this.containers, (ele) => {
ele.style.float = 'left'
ele.style.width = '100vw'
ele.style.height = '100%'
ele.style.overflow = 'auto'
ele.style.WebkitOverflowScrolling = 'touch'
ele.addEventListener('touchstart', (e) => {
this.startY = e.touches[0].clientY // 设置起始y坐标
this.startX = e.touches[0].clientX // 设置起始y坐标
}, false)
ele.addEventListener('touchmove', (e) => {
this.scrollTop = this.containers[this.nowIndex].scrollTop
this.isBottom = this.containers[this.nowIndex].querySelector('.s-pull').clientHeight <= this.scrollTop + this.height
// 判断滑动方向是否为上下
const disY = e.touches[0].clientY - this.startY
const disX = e.touches[0].clientX - this.startX
// 设置事件(当为顶部或底部是取消默认事件)
if ((disY > 0 && ele.scrollTop == 0) || (disY < 0 && this.isBottom)) {
e.preventDefault()
}
// 若为左右滑动时取消默认事件
if (Math.abs(disY) < Math.abs(disX)) e.preventDefault()
}, false)
})
// 上下拉
if (this.options.isPullDown) {
this.pullDownHtml.style.position = 'absolute'
this.pullDownHtml.style.width = '100%'
this.pullDownHtmlHeight = this.pullDownHtml.clientHeight
}
if (this.options.isPullUp) {
this.pullUpHtml.style.position = 'absolute'
this.pullUpHtml.style.width = '100%'
this.pullUpHtml.style.bottom = '0'
this.pullUpHtmlHeight = this.pullUpHtml.clientHeight
}
// 添加事件
// 拖拽
touch.on(this.box, 'drag', (e) => {
this.direction = e.direction
this.touchmove(e)
this.options.onTouchmove && this.options.onTouchmove(this.nowIndex, e) // 事件输出
})
// 滑动
!this.options.closeInertia && touch.on(this.box, 'swipe', (e) => {
this.swipe(e)
})
// 手指离开屏幕
touch.on(this.box, 'touchend', (e) => {
this.touchend(e)
})
// 移动至默认页面
this.changePage(this.options.defaultPage || 0)
this.options.initCb && this.options.initCb()
}
// 拖拽方法
touchmove (e) {
this.box.style.transition = 'none' // 取消动画
if ((e.direction === 'left' || e.direction === 'right') && !this.disY) {
// 左右滑动
this.disX = e.distanceX
changeTransform(this.box, (this.left + this.disX), this.disY)
} else if (!this.disX && !this.prohibitPull) {
// 上下滑动
if (e.direction === 'down' && !this.options.isPullDown) return
if (e.direction === 'up' && !this.options.isPullUp) return
if ((this.scrollTop <= 0 && this.direction === 'down') || (this.isBottom && this.direction === 'up')) {
// 上下拉动容器
this.disY = e.distanceY
changeTransform(this.box, (this.left + this.disX), this.disY)
}
}
}
// 手指离开屏幕
touchend (e) {
this.box.style.transition = 'all ' + this.options.speed / 1000 + 's' // 开启动画
if (!this.prohibitPull) {
if (Math.abs(this.disY) < this.options.threshold) { // 上下拉小于阀值自动复原
this.disY = 0
changeTransform(this.box, (this.left + this.disX), this.disY)
}
// 下拉刷新触发
if (this.scrollTop <= 0 && this.direction === 'down' && this.disY >= this.options.threshold) {
this.disY = this.pullDownHtmlHeight
this.prohibitPull = true
// 显示加载中
this.pullDownHtml.style.visibility = 'visible'
this.options.onRefreshStart && this.options.onRefreshStart(this.nowIndex) // 输出下拉刷新事件
}
// 上拉加载触发
else if (this.isBottom && this.direction === 'up' && Math.abs(this.disY) > this.options.threshold) {
this.disY = -this.pullUpHtmlHeight
this.prohibitPull = true
// 显示加载中
this.pullUpHtml.style.visibility = 'visible'
this.options.onLoadStart && this.options.onLoadStart(this.nowIndex) // 输出上拉事件
}
}
// 左右滑动
if (Math.abs(this.disX) < this.width * this.options.xThreshold) {
changeTransform(this.box, this.left, this.disY)
this.disX = 0
} else {
this.left += this.disX / Math.abs(this.disX) * this.width
if (this.left > 0) this.left = 0
if (this.left <= -this.totalWidth) this.left = -(this.totalWidth - this.width)
changeTransform(this.box, this.left, this.disY)
}
this.direction = '' // 重置方向
this.nowIndex = Math.abs(this.left) / this.width // 计算页数
}
// 快速滑动
swipe (e) {
if (e.factor < 1 && !this.disX && !this.disY) {
if (e.direction === 'left') {
this.left -= this.width
} else if (e.direction === 'right') {
this.left += this.width
}
if (this.left > 0) this.left = 0
if (this.left <= -this.totalWidth) this.left = -(this.totalWidth - this.width)
changeTransform(this.box, this.left, this.disY)
}
this.disX = 0
this.nowIndex = Math.abs(this.left) / this.width // 计算页数
}
// 关闭上下拉
pullEnd (cb) {
cb && cb(this.nowIndex)
changeTransform(this.box, this.left, 0)
this.disY = 0
this.prohibitPull = false
}
// 切换页数
changePage (page) {
if (this.prohibitPull) return
this.left = -page * this.width
changeTransform(this.box, this.left, this.disY)
this.nowIndex = Math.abs(this.left) / this.width
}
}
window.TabSwiper = TabSwiper
})(window, document)
