123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355 |
- // [z-paging]微信小程序、QQ小程序、app-vue、h5上使用wxs实现自定义下拉刷新,降低逻辑层与视图层的通信折损,提升性能
- var currentDis = 0;
- var isPCFlag = -1;
- var startY = -1;
- function propObserver(newValue, oldValue, ownerIns, ins) {
- var state = ownerIns.getState() || {};
- state.currentIns = ins;
- var dataset = ins.getDataset();
- var loading = dataset.loading == true;
- if (newValue && newValue.indexOf('end') != -1) {
- var transition = newValue.split('end')[0];
- _setTransform('translateY(0px)', ins, false, transition);
- state.moveDis = 0;
- state.oldMoveDis = 0;
- currentDis = 0;
- } else if (newValue && newValue.indexOf('begin') != -1) {
- var refresherThreshold = ins.getDataset().refresherthreshold;
- _setTransformValue(refresherThreshold, ins, state, false);
- }
- }
- function touchstart(e, ownerIns) {
- var ins = _getIns(ownerIns);
- var state = {};
- var dataset = {};
- ownerIns.callMethod('_handleListTouchstart');
- if (ins) {
- state = ins.getState();
- dataset = ins.getDataset();
- if (_touchDisabled(e, ins, 0)) return;
- }
- var isTouchEnded = state.isTouchEnded;
- state.oldMoveDis = 0;
- var touch = _getTouch(e);
- var loading = _getIsTrue(dataset.loading);
- state.startY = touch.touchY;
- startY = state.startY;
- state.lastTouch = touch;
- if (!loading && isTouchEnded) {
- state.isTouchmoving = false;
- }
- state.isTouchEnded = false;
- ownerIns.callMethod('_handleRefresherTouchstart', touch);
- }
- function touchmove(e, ownerIns) {
- var touch = _getTouch(e);
- var ins = _getIns(ownerIns);
- var dataset = ins.getDataset();
- var refresherThreshold = dataset.refresherthreshold;
- var isIos = _getIsTrue(dataset.isios);
- var state = ins.getState();
- var dataset = ins.getDataset();
- var watchTouchDirectionChange = _getIsTrue(dataset.watchtouchdirectionchange);
- var moveDisObj = {};
- var moveDis = 0;
- var prevent = false;
- if (watchTouchDirectionChange) {
- moveDisObj = _getMoveDis(e, ins);
- moveDis = moveDisObj.currentDis;
- prevent = moveDisObj.isDown;
- if(state.oldAcceptedIsDown == prevent){
- ownerIns.callMethod('_handleTouchDirectionChange', {direction: prevent ? 'top' : 'bottom'});
- state.oldIsDown = prevent;
- }
- state.oldAcceptedIsDown = prevent;
- }
- if (_touchDisabled(e, ins, 1)) {
- _handlePullingDown(state, ownerIns, false);
- return true;
- }
- if (!_getAngleIsInRange(e, touch, state, dataset)) {
- _handlePullingDown(state, ownerIns, false);
- return true;
- }
- moveDisObj = _getMoveDis(e, ins);
- moveDis = moveDisObj.currentDis;
- prevent = moveDisObj.isDown;
- if (moveDis < 0) {
- _setTransformValue(0, ins, state, false);
- _handlePullingDown(state, ownerIns, false);
- return true;
- }
- if (prevent && !state.disabledBounce) {
- if (isIos) {
- ownerIns.callMethod('_handleScrollViewDisableBounce', {bounce: false});
- }
- state.disabledBounce = true;
- _handlePullingDown(state, ownerIns, prevent);
- return !prevent;
- }
- _setTransformValue(moveDis, ins, state, false);
- var oldRefresherStatus = state.refresherStatus;
- var oldIsTouchmoving = _getIsTrue(dataset.oldistouchmoving);
- var hasTouchmove = _getIsTrue(dataset.hastouchmove);
- var isTouchmoving = state.isTouchmoving;
- state.refresherStatus = moveDis >= refresherThreshold ? 1 : 0;
- if (!isTouchmoving) {
- state.isTouchmoving = true;
- isTouchmoving = true;
- }
- if (state.isTouchEnded) {
- state.isTouchEnded = false;
- }
- if (hasTouchmove) {
- ownerIns.callMethod('_handleWxsPullingDown', {moveDis:moveDis, diffDis:moveDisObj.diffDis});
- }
- if (oldRefresherStatus == undefined || oldRefresherStatus != state.refresherStatus || oldIsTouchmoving != isTouchmoving) {
- ownerIns.callMethod('_handleRefresherTouchmove', moveDis, touch);
- }
- _handlePullingDown(state, ownerIns, prevent);
- return !prevent;
- }
- function touchend(e, ownerIns) {
- var touch = _getTouch(e);
- var ins = _getIns(ownerIns);
- var dataset = ins.getDataset();
- var state = ins.getState();
- if (_touchDisabled(e, ins, 2)) return;
- state.reachMaxAngle = true;
- state.hitReachMaxAngleCount = 0;
- state.disabledBounce = false;
- state.fixedIsTopHitCount = 0;
- //ownerIns.callMethod('_handleScrollViewDisableBounce', {bounce:true});
- if (!state.isTouchmoving) return;
- var oldRefresherStatus = state.refresherStatus;
- var oldMoveDis = state.moveDis;
- var refresherThreshold = ins.getDataset().refresherthreshold
- var moveDis = _getMoveDis(e, ins).currentDis;
- if (!(moveDis >= refresherThreshold && oldRefresherStatus === 1)) {
- state.isTouchmoving = false;
- }
- ownerIns.callMethod('_handleRefresherTouchend', moveDis);
- state.isTouchEnded = true;
- if (oldMoveDis < refresherThreshold) return;
- var animate = false;
- if (moveDis >= refresherThreshold) {
- moveDis = refresherThreshold;
- animate = true;
- }
- _setTransformValue(moveDis, ins, state, animate);
- }
- // #ifdef H5
- function isPC() {
- if (!navigator) return false;
- if (isPCFlag != -1) return isPCFlag;
- var userAgentInfo = navigator.userAgent;
- var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
- var flag = true;
- for (var i = 0; i < Agents.length; i++) {
- if (userAgentInfo.indexOf(Agents[i]) > 0) {
- flag = false;
- break;
- }
- }
- isPCFlag = flag;
- return isPCFlag;
- }
- var movable = false;
- function mousedown(e, ins) {
- if (!isPC()) return;
- touchstart(e, ins);
- movable = true;
- }
- function mousemove(e, ins) {
- if (!isPC()) return;
- if (!movable) return;
- touchmove(e, ins);
- }
- function mouseup(e, ins) {
- if (!isPC()) return;
- touchend(e, ins);
- movable = false;
- }
- function mouseleave(e, ins) {
- if (!isPC()) return;
- movable = false;
- }
- // #endif
- function _setTransformValue(value, ins, state, animate) {
- value = value || 0;
- if (state.moveDis == value) return;
- state.moveDis = value;
- _setTransform('translateY(' + value + 'px)', ins, animate, '');
- }
- function _setTransform(transform, ins, animate, transition) {
- if (transform == 'translateY(0px)') {
- transform = 'none';
- }
- ins.requestAnimationFrame(function() {
- var stl = { 'transform': transform };
- if (animate) {
- stl['transition'] = 'transform .1s linear';
- }
- if (transition.length) {
- stl['transition'] = transition;
- }
- ins.setStyle(stl);
- })
- }
- function _getMoveDis(e, ins) {
- var state = ins.getState();
- var refresherThreshold = parseFloat(ins.getDataset().refresherthreshold);
- var refresherOutRate = parseFloat(ins.getDataset().refresheroutrate);
- var touch = _getTouch(e);
- var currentStartY = !state.startY || state.startY == 'NaN' ? startY : state.startY;
- var moveDis = touch.touchY - currentStartY;
- var oldMoveDis = state.oldMoveDis || 0;
- state.oldMoveDis = moveDis;
- var diffDis = moveDis - oldMoveDis;
- if (diffDis > 0) {
- diffDis = diffDis * 0.85;
- if (currentDis > refresherThreshold) {
- diffDis = diffDis * (1 - refresherOutRate);
- }
- }
- if (diffDis > 200) {
- currentDis = 0;
- diffDis = 0;
- } else {
- currentDis += diffDis;
- currentDis = Math.max(0, currentDis);
- }
- return {
- currentDis: currentDis,
- diffDis: diffDis,
- isDown: diffDis > 0
- };
- }
- function _getTouch(e) {
- var touch = e;
- if (e.touches && e.touches.length) {
- touch = e.touches[0];
- } else if (e.changedTouches && e.changedTouches.length) {
- touch = e.changedTouches[0];
- } else if (e.datail && e.datail != {}) {
- touch = e.datail;
- }
- return {
- touchX: touch.clientX,
- touchY: touch.clientY
- };
- }
- function _getIns(ownerIns) {
- var ins = ownerIns.getState().currentIns;
- if (!ins) {
- ownerIns.callMethod('_handlePropUpdate');
- }
- return ins;
- }
- function _touchDisabled(e, ins, processTag) {
- var dataset = ins.getDataset();
- var state = ins.getState();
- var loading = _getIsTrue(dataset.loading);
- var useChatRecordMode = _getIsTrue(dataset.usechatrecordmode);
- var refresherEnabled = _getIsTrue(dataset.refresherenabled);
- var useCustomRefresher = _getIsTrue(dataset.usecustomrefresher);
- var usePageScroll = _getIsTrue(dataset.usepagescroll);
- var pageScrollTop = parseFloat(dataset.pagescrolltop);
- var scrollTop = parseFloat(dataset.scrolltop);
- var finalScrollTop = usePageScroll ? pageScrollTop : scrollTop;
- var fixedIsTop = false;
- var isIos = _getIsTrue(dataset.isios);
- if (!isIos && finalScrollTop == (state.startScrollTop || 0) && finalScrollTop <= 105) {
- fixedIsTop = true;
- }
- var fixedIsTopHitCount = state.fixedIsTopHitCount || 0;
- if (fixedIsTop) {
- fixedIsTopHitCount++;
- if (fixedIsTopHitCount <= 3) {
- fixedIsTop = false;
- }
- state.fixedIsTopHitCount = fixedIsTopHitCount;
- } else {
- state.fixedIsTopHitCount = 0;
- }
- if (!isIos && processTag === 0) {
- state.startScrollTop = finalScrollTop || 0;
- }
- if (!isIos && processTag === 2) {
- fixedIsTop = true;
- }
- var res = loading || useChatRecordMode || !refresherEnabled || !useCustomRefresher || ((usePageScroll && useCustomRefresher && pageScrollTop > 5) && !fixedIsTop) ||
- ((!usePageScroll && useCustomRefresher && scrollTop > 5) && !fixedIsTop);
- return res;
- }
- function _getAngleIsInRange(e, touch, state, dataset) {
- var maxAngle = dataset.refreshermaxangle;
- var refresherAecc = _getIsTrue(dataset.refresheraecc);
- var lastTouch = state.lastTouch;
- var reachMaxAngle = state.reachMaxAngle;
- var moveDis = state.oldMoveDis;
- if (!lastTouch) return true;
- if (maxAngle >= 0 && maxAngle <= 90 && lastTouch) {
- if ((!moveDis || moveDis < 1) && !refresherAecc && reachMaxAngle != null && !reachMaxAngle) return false;
- var x = Math.abs(touch.touchX - lastTouch.touchX);
- var y = Math.abs(touch.touchY - lastTouch.touchY);
- var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
- if ((x || y) && x > 1) {
- var angle = Math.asin(y / z) / Math.PI * 180;
- if (angle < maxAngle) {
- var hitReachMaxAngleCount = state.hitReachMaxAngleCount || 0;
- state.hitReachMaxAngleCount = ++hitReachMaxAngleCount;
- if (state.hitReachMaxAngleCount > 2) {
- state.lastTouch = touch;
- state.reachMaxAngle = false;
- }
- return false;
- }
- }
- }
- state.lastTouch = touch;
- return true;
- }
- function _handlePullingDown(state, ins, onPullingDown) {
- var oldOnPullingDown = state.onPullingDown || false;
- if (oldOnPullingDown != onPullingDown) {
- ins.callMethod('_handleWxsPullingDownStatusChange', onPullingDown);
- }
- state.onPullingDown = onPullingDown;
- }
- function _getIsTrue(value) {
- value = (typeof(value) === 'string' ? JSON.parse(value) : value) || false;
- return value == true || value == 'true';
- }
- module.exports = {
- touchstart: touchstart,
- touchmove: touchmove,
- touchend: touchend,
- mousedown: mousedown,
- mousemove: mousemove,
- mouseup: mouseup,
- mouseleave: mouseleave,
- propObserver: propObserver
- }
|