qwl-wechat-h5/components/mescroll-uni/wxs/wxs.wxs

// 使用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){
	ins.requestAnimationFrame(function () {
		ins.selectComponent('.mescroll-wxs-content').setStyle({
			transform: 'translateY(' + downHight + 'px)',
			transition: ''
		})
		// 环形进度条
		var progress = ins.selectComponent('.mescroll-wxs-progress')
		progress && progress.setStyle({transform: 'rotate(' + 360 * rate + 'deg)'})
	})
}

/* 显示下拉刷新进度 */
me.showLoading = function (ins){
	me.downHight = me.optDown.offset
	ins.requestAnimationFrame(function () {
		ins.selectComponent('.mescroll-wxs-content').setStyle({
			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({
			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({
			transform: '',
			transition: ''
		})
	})
}

// ------ 自定义下拉刷新动画 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)
		}
	}
}

/**
 * touch事件
 */
function touchstartEvent(e, ins) {
	if (me.disabled()) return true;
	
	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,也有可能大于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.disabled()) return true;
	// 如果下拉区域高度已改变,则需重置回来
	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
}