123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182 |
- /**
- * 轮播触屏脚本
- */
- // 轮播容器ID
- var containerId = '#swiperContainer';
- // 移动阈值
- var moveThreshold = 0.3;
- // 轮播方向
- var DIRECTION = {
- // 水平
- HOR: 'horizontal',
- // 垂直
- VER: 'vertical',
- };
- function updateMoveInfo(state, event) {
- var touchPoint = event.touches[0];
- state.moveX = touchPoint.clientX - state.startX;
- state.moveY = touchPoint.clientY - state.startY;
- }
- function moveContainer(state, reset) {
- if (state.direction === DIRECTION.HOR) {
- var offset = reset ? state.offsetX : state.offsetX + state.moveX;
- // console.log(DIRECTION.HOR, state.moveX);
- if (offset > 0) {
- offset = Math.min(state.width * moveThreshold, offset);
- } else {
- offset = Math.max(-state.width * (state.total - (1 - moveThreshold)), offset);
- }
- setOffset(state, offset, 0, !reset);
- } else {
- var offset = reset ? state.offsetY : state.offsetY + state.moveY;
- // console.log(DIRECTION.VER, state.moveY);
- if (offset > 0) {
- offset = Math.min(state.height * moveThreshold, offset);
- } else {
- offset = Math.max(-state.height * (state.total - (1 - moveThreshold)), offset);
- }
- setOffset(state, 0, offset, !reset);
- }
- }
- function setOffset(state, offsetX, offsetY, disAni) {
- var transform = 'translate3d(' + (offsetX || 0) + 'px, ' + (offsetY || 0) + 'px, 0)';
- var styles = {
- // '-webkit-transform': transform,
- transform: transform,
- };
- if (disAni) {
- styles['transition'] = 'none';
- }
- state.container.setStyle(styles);
- }
- function initContainer(ownerInstance) {
- var state = ownerInstance.getState();
- state.container = state.container || ownerInstance.selectComponent(containerId);
- }
- function startDrag(event, ownerInstance) {
- initContainer(ownerInstance);
- var state = ownerInstance.getState();
- var touchPoint = event.touches[0];
- state.startX = touchPoint.clientX;
- state.startY = touchPoint.clientY;
- ownerInstance.callMethod('pause');
- }
- function onDrag(event, ownerInstance) {
- var state = ownerInstance.getState();
- state.dragging = true;
- updateMoveInfo(state, event);
- moveContainer(state);
- }
- function endDrag(event, ownerInstance) {
- var state = ownerInstance.getState();
- state.dragging = false;
- ownerInstance.callMethod('replay');
- var pageDir = '';
- if (state.direction === DIRECTION.HOR) {
- pageDir = getPageDir(state.moveX, state.width);
- } else {
- pageDir = getPageDir(state.moveY, state.height);
- }
- if (pageDir) {
- ownerInstance.callMethod(pageDir, { source: 'touch' });
- return;
- }
- // 重置
- moveContainer(state, true);
- }
- /**
- * 返回分页操作的方向
- * @param move 移动距离
- * @param size 容器尺寸
- * @returns
- */
- function getPageDir(move, size) {
- if (move > 0) {
- // 右滑超过阈值
- if (move > size * moveThreshold) {
- return 'prev';
- }
- } else {
- // 左滑超过阈值
- if (-move > size * moveThreshold) {
- return 'next';
- }
- }
- }
- function changeOffsetByDirection(direction, newVal, ownerInstance) {
- initContainer(ownerInstance);
- var state = ownerInstance.getState();
- if (state.direction !== direction) return;
- var needInit = !state.inited && state.currentInited;
- if (direction === DIRECTION.HOR) {
- setOffset(state, state.offsetX, 0, needInit);
- } else {
- setOffset(state, 0, state.offsetY, needInit);
- }
- if (needInit) {
- state.inited = true;
- ownerInstance.callMethod('inited');
- }
- }
- function changeOffsetX(newVal, oldVal, ownerInstance) {
- var state = ownerInstance.getState();
- state.offsetX = newVal;
- changeOffsetByDirection(DIRECTION.HOR, newVal, ownerInstance);
- }
- function changeOffsetY(newVal, oldVal, ownerInstance) {
- var state = ownerInstance.getState();
- state.offsetY = newVal;
- changeOffsetByDirection(DIRECTION.VER, newVal, ownerInstance);
- }
- function changeWidth(newVal, oldVal, ownerInstance) {
- var state = ownerInstance.getState();
- state.width = newVal;
- }
- function changeHeight(newVal, oldVal, ownerInstance) {
- var state = ownerInstance.getState();
- state.height = newVal;
- }
- function changeDirection(newVal, oldVal, ownerInstance) {
- var state = ownerInstance.getState();
- state.direction = newVal;
- if (oldVal && newVal !== oldVal) {
- state.inited = false;
- changeOffsetByDirection(newVal, state.offsetY, ownerInstance);
- }
- }
- function changeTotal(newVal, oldVal, ownerInstance) {
- var state = ownerInstance.getState();
- state.total = newVal;
- }
- function changeCurrentInited(newVal, oldVal, ownerInstance) {
- var state = ownerInstance.getState();
- state.currentInited = newVal;
- }
- module.exports = {
- startDrag: startDrag,
- onDrag: onDrag,
- endDrag: endDrag,
- changeOffsetX: changeOffsetX,
- changeOffsetY: changeOffsetY,
- changeWidth: changeWidth,
- changeHeight: changeHeight,
- changeDirection: changeDirection,
- changeTotal: changeTotal,
- changeCurrentInited: changeCurrentInited,
- };
|