318 lines
11 KiB
XML
318 lines
11 KiB
XML
// 使用wxs处理交互动画, 提高性能, 同时避免小程序bounce对下拉刷新的影响
|
||
// https://uniapp.dcloud.io/frame?id=wxs
|
||
// https://developers.weixin.qq.com/miniprogram/dev/framework/view/interactive-animation.html
|
||
|
||
// 模拟mescroll实例, 与mescroll.js的写法尽量保持一致
|
||
var me = {}
|
||
|
||
// ------ 自定义下拉刷新动画 start ------
|
||
|
||
/* 下拉过程中的回调,滑动过程一直在执行 (rate<1为inOffset; rate>1为outOffset)*/
|
||
me.onMoving = function (ins, rate, downHight){
|
||
var isLockCallback = (rate >= 2); //大于2倍offset,自定义下拉刷新,进入淘宝二楼
|
||
|
||
ins.requestAnimationFrame(function () {
|
||
ins.selectComponent('.mescroll-wxs-content').setStyle({
|
||
'will-change': 'transform', // 可解决下拉过程中, image和swiper脱离文档流的问题
|
||
'transform': 'translateY(' + downHight + 'px)',
|
||
'transition': ''
|
||
})
|
||
// 显示淘宝二楼,则不再更新进度条
|
||
if(isLockCallback) return;
|
||
var leftAct = ins.selectComponent('.wxs-left-arc');
|
||
if(!leftAct) return;
|
||
var rightAct = ins.selectComponent('.wxs-right-arc');
|
||
if(!rightAct) return;
|
||
// 左半圆
|
||
var rotateLeft = ''
|
||
if (rate<1) {
|
||
var progressLeft = 360 * rate
|
||
if (progressLeft<180) {
|
||
rotateLeft = 'rotate(45deg)';
|
||
} else{
|
||
rotateLeft = 'rotate(' + (progressLeft-180+45) + 'deg)';
|
||
}
|
||
}else{
|
||
rotateLeft = 'rotate(225deg)';
|
||
}
|
||
leftAct.setStyle({
|
||
transform: rotateLeft
|
||
})
|
||
// 右半圆
|
||
var rotateRight = ""
|
||
var progressRight = 360 * rate;
|
||
if (progressRight<180) {
|
||
rotateRight = 'rotate(' + (progressRight+45) + 'deg)';
|
||
} else{
|
||
rotateRight = 'rotate(225deg)';
|
||
}
|
||
rightAct.setStyle({
|
||
transform: rotateRight
|
||
})
|
||
})
|
||
|
||
// 回调wxsCallLock
|
||
if(me.isLockCallback != isLockCallback){
|
||
me.isLockCallback=isLockCallback // 避免多次触发
|
||
ins.callMethod('wxsCallLock', {rate:rate, isLockCallback:isLockCallback})
|
||
}
|
||
}
|
||
|
||
/* 显示下拉刷新进度 */
|
||
me.showLoading = function (ins){
|
||
me.downHight = me.optDown.offset
|
||
ins.requestAnimationFrame(function () {
|
||
ins.selectComponent('.mescroll-wxs-content').setStyle({
|
||
'will-change': 'auto',
|
||
'transform': 'translateY(' + me.downHight + 'px)',
|
||
'transition': 'transform 300ms'
|
||
})
|
||
})
|
||
}
|
||
|
||
/* 结束下拉 */
|
||
me.endDownScroll = function (ins){
|
||
me.downHight = 0;
|
||
me.isDownScrolling = false;
|
||
ins.requestAnimationFrame(function () {
|
||
ins.selectComponent('.mescroll-wxs-content').setStyle({
|
||
'will-change': 'auto',
|
||
'transform': 'translateY(0)', // 不可以写空串,否则scroll-view渲染不完整 (延时350ms会调clearTransform置空)
|
||
'transition': 'transform 300ms'
|
||
})
|
||
})
|
||
}
|
||
|
||
/* 结束下拉动画执行完毕后, 清除transform和transition, 避免对列表内容样式造成影响, 如: h5的list-msg示例下拉进度条漏出来等 */
|
||
me.clearTransform = function (ins){
|
||
ins.requestAnimationFrame(function () {
|
||
ins.selectComponent('.mescroll-wxs-content').setStyle({
|
||
'will-change': '',
|
||
'transform': '',
|
||
'transition': ''
|
||
})
|
||
})
|
||
}
|
||
|
||
/* 显示淘宝二楼 */
|
||
me.showErlou = function (ins){
|
||
ins.requestAnimationFrame(function () {
|
||
var downHight = 2 * me.getBodyHeight(); // 往下拉
|
||
ins.selectComponent('.mescroll-wxs-content').setStyle({
|
||
transform: 'translateY(' + downHight + 'px)',
|
||
transition: 'transform 300ms'
|
||
})
|
||
})
|
||
}
|
||
|
||
// ------ 自定义下拉刷新动画 end ------
|
||
|
||
/**
|
||
* 监听逻辑层数据的变化 (实时更新数据)
|
||
*/
|
||
function propObserver(wxsProp) {
|
||
me.optDown = wxsProp.optDown
|
||
me.scrollTop = wxsProp.scrollTop
|
||
me.bodyHeight = wxsProp.bodyHeight
|
||
me.isDownScrolling = wxsProp.isDownScrolling
|
||
me.isUpScrolling = wxsProp.isUpScrolling
|
||
me.isUpBoth = wxsProp.isUpBoth
|
||
me.isScrollBody = wxsProp.isScrollBody
|
||
me.startTop = wxsProp.scrollTop // 及时更新touchstart触发的startTop, 避免scroll-view快速惯性滚动到顶部取值不准确
|
||
}
|
||
|
||
/**
|
||
* 监听逻辑层数据的变化 (调用wxs的方法)
|
||
*/
|
||
function callObserver(callProp, oldValue, ins) {
|
||
if (me.disabled()) return;
|
||
if(callProp.callType){
|
||
// 逻辑层（App Service）的style已失效,需在视图层（Webview）设置style
|
||
if(callProp.callType === 'showLoading'){
|
||
me.showLoading(ins)
|
||
}else if(callProp.callType === 'endDownScroll'){
|
||
me.endDownScroll(ins)
|
||
}else if(callProp.callType === 'clearTransform'){
|
||
me.clearTransform(ins)
|
||
}else if(callProp.callType === 'showErlou'){
|
||
me.showErlou(ins)
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* touch事件
|
||
*/
|
||
function touchstartEvent(e, ins) {
|
||
me.downHight = 0; // 下拉的距离
|
||
me.startPoint = me.getPoint(e); // 记录起点
|
||
me.startTop = me.getScrollTop(); // 记录此时的滚动条位置
|
||
me.startAngle = 0; // 初始角度
|
||
me.lastPoint = me.startPoint; // 重置上次move的点
|
||
me.maxTouchmoveY = me.getBodyHeight() - me.optDown.bottomOffset; // 手指触摸的最大范围(写在touchstart避免body获取高度为0的情况)
|
||
me.inTouchend = false; // 标记不是touchend
|
||
|
||
me.callMethod(ins, {type: 'setWxsProp'}) // 同步更新wxsProp的数据 (小程序是异步的,可能touchmove先执行,才到propObserver; h5和app是同步)
|
||
}
|
||
|
||
function touchmoveEvent(e, ins) {
|
||
var isPrevent = true // false表示不往上冒泡，相当于调用了同时调用了stopPropagation和preventDefault (对小程序生效, h5和app无效)
|
||
|
||
if (me.disabled()) return isPrevent;
|
||
|
||
var scrollTop = me.getScrollTop(); // 当前滚动条的距离
|
||
var curPoint = me.getPoint(e); // 当前点
|
||
|
||
var moveY = curPoint.y - me.startPoint.y; // 和起点比,移动的距离,大于0向下拉,小于0向上拉
|
||
|
||
// 向下拉 && 在顶部
|
||
// mescroll-body,直接判定在顶部即可
|
||
// scroll-view在滚动时不会触发touchmove,当触顶/底/左/右时,才会触发touchmove
|
||
// scroll-view滚动到顶部时,scrollTop不一定为0; 在iOS的APP中scrollTop可能为负数,不一定和startTop相等
|
||
if (moveY > 0 && (
|
||
(me.isScrollBody && scrollTop <= 0)
|
||
||
|
||
(!me.isScrollBody && (scrollTop <= 0 || (scrollTop <= me.optDown.startTop && scrollTop === me.startTop)) )
|
||
)) {
|
||
// 可下拉的条件
|
||
if (!me.inTouchend && !me.isDownScrolling && !me.optDown.isLock && (!me.isUpScrolling || (me.isUpScrolling &&
|
||
me.isUpBoth))) {
|
||
|
||
// 下拉的角度是否在配置的范围内
|
||
if(!me.startAngle) me.startAngle = me.getAngle(me.lastPoint, curPoint); // 两点之间的角度,区间 [0,90]
|
||
if (me.startAngle < me.optDown.minAngle) return isPrevent; // 如果小于配置的角度,则不往下执行下拉刷新
|
||
|
||
// 如果手指的位置超过配置的距离,则提前结束下拉,避免Webview嵌套导致touchend无法触发
|
||
if (me.maxTouchmoveY > 0 && curPoint.y >= me.maxTouchmoveY) {
|
||
me.inTouchend = true; // 标记执行touchend
|
||
touchendEvent(e, ins); // 提前触发touchend
|
||
return isPrevent;
|
||
}
|
||
|
||
isPrevent = false // 小程序是return false
|
||
|
||
var diff = curPoint.y - me.lastPoint.y; // 和上次比,移动的距离 (大于0向下,小于0向上)
|
||
|
||
// 下拉距离 < 指定距离
|
||
if (me.downHight < me.optDown.offset) {
|
||
if (me.movetype !== 1) {
|
||
me.movetype = 1; // 加入标记,保证只执行一次
|
||
// me.optDown.inOffset && me.optDown.inOffset(me); // 进入指定距离范围内那一刻的回调,只执行一次
|
||
me.callMethod(ins, {type: 'setLoadType', downLoadType: 1})
|
||
me.isMoveDown = true; // 标记下拉区域高度改变,在touchend重置回来
|
||
}
|
||
me.downHight += diff * me.optDown.inOffsetRate; // 越往下,高度变化越小
|
||
|
||
// 指定距离 <= 下拉距离
|
||
} else {
|
||
if (me.movetype !== 2) {
|
||
me.movetype = 2; // 加入标记,保证只执行一次
|
||
// me.optDown.outOffset && me.optDown.outOffset(me); // 下拉超过指定距离那一刻的回调,只执行一次
|
||
me.callMethod(ins, {type: 'setLoadType', downLoadType: 2})
|
||
me.isMoveDown = true; // 标记下拉区域高度改变,在touchend重置回来
|
||
}
|
||
if (diff > 0) { // 向下拉
|
||
me.downHight += diff * me.optDown.outOffsetRate; // 越往下,高度变化越小
|
||
} else { // 向上收
|
||
me.downHight += diff; // 向上收回高度,则向上滑多少收多少高度
|
||
}
|
||
}
|
||
|
||
me.downHight = Math.round(me.downHight) // 取整
|
||
var rate = me.downHight / me.optDown.offset; // 下拉区域当前高度与指定距离的比值
|
||
// me.optDown.onMoving && me.optDown.onMoving(me, rate, me.downHight); // 下拉过程中的回调,一直在执行
|
||
me.onMoving(ins, rate, me.downHight)
|
||
}
|
||
}
|
||
|
||
me.lastPoint = curPoint; // 记录本次移动的点
|
||
|
||
return isPrevent // false表示不往上冒泡，相当于调用了同时调用了stopPropagation和preventDefault (对小程序生效, h5和app无效)
|
||
}
|
||
|
||
function touchendEvent(e, ins) {
|
||
// 如果下拉区域高度已改变,则需重置回来
|
||
if (me.isMoveDown) {
|
||
if (me.downHight >= me.optDown.offset) {
|
||
// 符合触发刷新的条件
|
||
me.downHight = me.optDown.offset; // 更新下拉区域高度
|
||
// me.triggerDownScroll();
|
||
me.callMethod(ins, {type: 'triggerDownScroll'})
|
||
} else {
|
||
// 不符合的话 则重置
|
||
me.downHight = 0;
|
||
// me.optDown.endDownScroll && me.optDown.endDownScroll(me);
|
||
me.callMethod(ins, {type: 'endDownScroll'})
|
||
}
|
||
me.movetype = 0;
|
||
me.isMoveDown = false;
|
||
} else if (!me.isScrollBody && me.getScrollTop() === me.startTop) { // scroll-view到顶/左/右/底的滑动事件
|
||
var isScrollUp = me.getPoint(e).y - me.startPoint.y < 0; // 和起点比,移动的距离,大于0向下拉,小于0向上拉
|
||
// 上滑
|
||
if (isScrollUp) {
|
||
// 需检查滑动的角度
|
||
var angle = me.getAngle(me.getPoint(e), me.startPoint); // 两点之间的角度,区间 [0,90]
|
||
if (angle > 80) {
|
||
// 检查并触发上拉
|
||
// me.triggerUpScroll(true);
|
||
me.callMethod(ins, {type: 'triggerUpScroll'})
|
||
}
|
||
}
|
||
}
|
||
me.callMethod(ins, {type: 'setWxsProp'}) // 同步更新wxsProp的数据 (小程序是异步的,可能touchmove先执行,才到propObserver; h5和app是同步)
|
||
}
|
||
|
||
/*是否禁用*/
|
||
me.disabled = function(){
|
||
return !me.optDown || !me.optDown.use || me.optDown.native
|
||
}
|
||
|
||
/* 根据点击滑动事件获取第一个手指的坐标 */
|
||
me.getPoint = function(e) {
|
||
if (!e) {
|
||
return {x: 0,y: 0}
|
||
}
|
||
if (e.touches && e.touches[0]) {
|
||
return {x: e.touches[0].pageX,y: e.touches[0].pageY}
|
||
} else if (e.changedTouches && e.changedTouches[0]) {
|
||
return {x: e.changedTouches[0].pageX,y: e.changedTouches[0].pageY}
|
||
} else {
|
||
return {x: e.clientX,y: e.clientY}
|
||
}
|
||
}
|
||
|
||
/* 计算两点之间的角度: 区间 [0,90]*/
|
||
me.getAngle = function (p1, p2) {
|
||
var x = Math.abs(p1.x - p2.x);
|
||
var y = Math.abs(p1.y - p2.y);
|
||
var z = Math.sqrt(x * x + y * y);
|
||
var angle = 0;
|
||
if (z !== 0) {
|
||
angle = Math.asin(y / z) / Math.PI * 180;
|
||
}
|
||
return angle
|
||
}
|
||
|
||
/* 获取滚动条的位置 */
|
||
me.getScrollTop = function() {
|
||
return me.scrollTop || 0
|
||
}
|
||
|
||
/* 获取body的高度 */
|
||
me.getBodyHeight = function() {
|
||
return me.bodyHeight || 0;
|
||
}
|
||
|
||
/* 调用逻辑层的方法 */
|
||
me.callMethod = function(ins, param) {
|
||
if(ins) ins.callMethod('wxsCall', param)
|
||
}
|
||
|
||
/* 导出模块 */
|
||
module.exports = {
|
||
propObserver: propObserver,
|
||
callObserver: callObserver,
|
||
touchstartEvent: touchstartEvent,
|
||
touchmoveEvent: touchmoveEvent,
|
||
touchendEvent: touchendEvent
|
||
} |