288 lines
9.7 KiB
Plaintext
288 lines
9.7 KiB
Plaintext
|
|
|||
|
|
function setTimeout(instance, cb, time) {
|
|||
|
|
if (time > 0) {
|
|||
|
|
var s = getDate().getTime()
|
|||
|
|
var fn = function () {
|
|||
|
|
if (getDate().getTime() - s > time) {
|
|||
|
|
cb && cb()
|
|||
|
|
} else
|
|||
|
|
instance.requestAnimationFrame(fn)
|
|||
|
|
}
|
|||
|
|
fn()
|
|||
|
|
}
|
|||
|
|
else
|
|||
|
|
cb && cb()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 判断触摸的移动方向
|
|||
|
|
function decideSwiperDirection(startTouches, currentTouches, vertical) {
|
|||
|
|
// 震动偏移容差
|
|||
|
|
var toleranceShake = 150
|
|||
|
|
// 移动容差
|
|||
|
|
var toleranceTranslate = 10
|
|||
|
|
|
|||
|
|
if (!vertical) {
|
|||
|
|
// 水平方向移动
|
|||
|
|
if (Math.abs(currentTouches.y - startTouches.y) <= toleranceShake) {
|
|||
|
|
// console.log(currentTouches.x, startTouches.x);
|
|||
|
|
if (Math.abs(currentTouches.x - startTouches.x) > toleranceTranslate) {
|
|||
|
|
if (currentTouches.x - startTouches.x > 0) {
|
|||
|
|
return 'right'
|
|||
|
|
} else if (currentTouches.x - startTouches.x < 0) {
|
|||
|
|
return 'left'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 垂直方向移动
|
|||
|
|
if (Math.abs(currentTouches.x - startTouches.x) <= toleranceShake) {
|
|||
|
|
// console.log(currentTouches.x, startTouches.x);
|
|||
|
|
if (Math.abs(currentTouches.y - startTouches.y) > toleranceTranslate) {
|
|||
|
|
if (currentTouches.y - startTouches.y > 0) {
|
|||
|
|
return 'down'
|
|||
|
|
} else if (currentTouches.y - startTouches.y < 0) {
|
|||
|
|
return 'up'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// swiperItem参数数据更新
|
|||
|
|
var itemDataObserver = function(newVal, oldVal, ownerInstance, instance) {
|
|||
|
|
if (!newVal || newVal === 'undefined') return
|
|||
|
|
var state = ownerInstance.getState()
|
|||
|
|
state.itemData = newVal
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// swiperIndex数据更新
|
|||
|
|
var currentIndexObserver = function(newVal, oldVal, ownerInstance, instance) {
|
|||
|
|
if ((!newVal && newVal != 0) || newVal === 'undefined') return
|
|||
|
|
var state = ownerInstance.getState()
|
|||
|
|
state.currentIndex = newVal
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// containerData数据更新
|
|||
|
|
var containerDataObserver = function(newVal, oldVal, ownerInstance, instance) {
|
|||
|
|
if (!newVal || newVal === 'undefined') return
|
|||
|
|
var state = ownerInstance.getState()
|
|||
|
|
state.containerData = newVal
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 开始触摸
|
|||
|
|
var touchStart = function(event, ownerInstance) {
|
|||
|
|
console.log('touchStart');
|
|||
|
|
var instance = event.instance
|
|||
|
|
var dataset = instance.getDataset()
|
|||
|
|
var state = ownerInstance.getState()
|
|||
|
|
var itemData = state.itemData
|
|||
|
|
var containerData = state.containerData
|
|||
|
|
|
|||
|
|
// 由于当前SwiperIndex初始为0，可能会导致swiperIndex数据没有更新
|
|||
|
|
if (!state.currentIndex || state.currentIndex === 'undefined') {
|
|||
|
|
state.currentIndex = 0
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!containerData || containerData.circular === 'undefined') {
|
|||
|
|
containerData.circular = false
|
|||
|
|
}
|
|||
|
|
state.containerData = containerData
|
|||
|
|
|
|||
|
|
// 如果当前切换动画还没执行结束，再次触摸会重新加载对应的swiperContainer的信息
|
|||
|
|
// console.log(containerData.animationFinish);
|
|||
|
|
if (!containerData.animationFinish) {
|
|||
|
|
ownerInstance.callMethod('changeParentSwiperContainerStyleStatus',{
|
|||
|
|
status: 'reload'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 判断是否为为当前显示的SwiperItem
|
|||
|
|
if (itemData.index != state.currentIndex) return
|
|||
|
|
|
|||
|
|
var touches = event.changedTouches[0]
|
|||
|
|
if (!touches) return
|
|||
|
|
|
|||
|
|
// 标记滑动开始时间
|
|||
|
|
state.touchStartTime = getDate().getTime()
|
|||
|
|
|
|||
|
|
// 记录当前滑动开始的x，y坐标
|
|||
|
|
state.touchRelactive = {
|
|||
|
|
x: touches.pageX,
|
|||
|
|
y: touches.pageY
|
|||
|
|
}
|
|||
|
|
// 记录触摸id，用于处理多指的情况
|
|||
|
|
state.touchId = touches.identifier
|
|||
|
|
|
|||
|
|
// 标记开始触摸
|
|||
|
|
state.touching = true
|
|||
|
|
ownerInstance.callMethod('updateTouchingStatus', {
|
|||
|
|
status: true
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 正在移动
|
|||
|
|
var touchMove = function(event, ownerInstance) {
|
|||
|
|
console.log('touchMove');
|
|||
|
|
var instance = event.instance
|
|||
|
|
var dataset = instance.getDataset()
|
|||
|
|
var state = ownerInstance.getState()
|
|||
|
|
var itemData = state.itemData
|
|||
|
|
var containerData = state.containerData
|
|||
|
|
|
|||
|
|
// 判断是否为为当前显示的SwiperItem
|
|||
|
|
if (itemData.index != state.currentIndex) return
|
|||
|
|
|
|||
|
|
// 判断是否开始触摸
|
|||
|
|
if (!state.touching) return
|
|||
|
|
|
|||
|
|
var touches = event.changedTouches[0]
|
|||
|
|
if (!touches) return
|
|||
|
|
// 判断是否为同一个触摸点
|
|||
|
|
if (state.touchId != touches.identifier) return
|
|||
|
|
|
|||
|
|
var currentTouchRelactive = {
|
|||
|
|
x: touches.pageX,
|
|||
|
|
y: touches.pageY
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 计算相对位移比例
|
|||
|
|
if (containerData.vertical) {
|
|||
|
|
var touchDistance = currentTouchRelactive.y - state.touchRelactive.y
|
|||
|
|
var itemHeight = itemData.itemHeight
|
|||
|
|
var distanceRate = touchDistance / itemHeight
|
|||
|
|
// console.log(currentTouchRelactive.y, touchDistance, itemHeight, distanceRate);
|
|||
|
|
|
|||
|
|
// 判断是否为衔接轮播，如果不是衔接轮播，如果当前为第一个swiperItem并且向下滑、当前为最后一个swiperItem并且向上滑时不进行操作
|
|||
|
|
if (!containerData.circular &&
|
|||
|
|
((state.currentIndex === 0 && touchDistance > 0) || (state.currentIndex === containerData.swiperItemLength - 1 && touchDistance < 0))
|
|||
|
|
) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果超出了距离则不进行操作
|
|||
|
|
if((Math.abs(touchDistance) > (itemData.itemTop + itemData.itemHeight))) {
|
|||
|
|
ownerInstance.callMethod('updateParentSwiperContainerStyle', {
|
|||
|
|
value: distanceRate < 0 ? -1 : 1
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
var touchDistance = currentTouchRelactive.x - state.touchRelactive.x
|
|||
|
|
var itemWidth = itemData.itemWidth
|
|||
|
|
var distanceRate = touchDistance / itemWidth
|
|||
|
|
// console.log(currentTouchRelactive.x, touchDistance, itemWidth, distanceRate);
|
|||
|
|
|
|||
|
|
// 判断是否为衔接轮播，如果不是衔接轮播，如果当前为第一个swiperItem并且向右滑、当前为最后一个swiperItem并且向左滑时不进行操作
|
|||
|
|
if (!containerData.circular &&
|
|||
|
|
((state.currentIndex === 0 && touchDistance > 0) || (state.currentIndex === containerData.swiperItemLength - 1 && touchDistance < 0))
|
|||
|
|
) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果超出了距离则不进行操作
|
|||
|
|
if((Math.abs(touchDistance) > (itemData.itemLeft + itemData.itemWidth))) {
|
|||
|
|
ownerInstance.callMethod('updateParentSwiperContainerStyle', {
|
|||
|
|
value: distanceRate < 0 ? -1 : 1
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ownerInstance.callMethod('updateParentSwiperContainerStyle', {
|
|||
|
|
value: distanceRate
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 移动结束
|
|||
|
|
var touchEnd = function(event, ownerInstance) {
|
|||
|
|
console.log('touchEnd');
|
|||
|
|
var instance = event.instance
|
|||
|
|
var dataset = instance.getDataset()
|
|||
|
|
var state = ownerInstance.getState()
|
|||
|
|
var itemData = state.itemData
|
|||
|
|
var containerData = state.containerData
|
|||
|
|
|
|||
|
|
// 判断是否为为当前显示的SwiperItem
|
|||
|
|
if (itemData.index != state.currentIndex) return
|
|||
|
|
|
|||
|
|
// 判断是否开始触摸
|
|||
|
|
if (!state.touching) return
|
|||
|
|
|
|||
|
|
var touches = event.changedTouches[0]
|
|||
|
|
if (!touches) return
|
|||
|
|
// 判断是否为同一个触摸点
|
|||
|
|
if (state.touchId != touches.identifier) return
|
|||
|
|
|
|||
|
|
|
|||
|
|
var currentTime = getDate().getTime()
|
|||
|
|
var currentTouchRelactive = {
|
|||
|
|
x: touches.pageX,
|
|||
|
|
y: touches.pageY
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (containerData.vertical) {
|
|||
|
|
// 判断触摸移动方向
|
|||
|
|
var direction = decideSwiperDirection(state.touchRelactive, currentTouchRelactive, true)
|
|||
|
|
// 判断是否为衔接轮播，如果不是衔接轮播，如果当前为第一个swiperItem并且向下滑、当前为最后一个swiperItem并且向上滑时不进行操作
|
|||
|
|
if (containerData.circular ||
|
|||
|
|
!((state.currentIndex === 0 && direction === 'down') || (state.currentIndex === containerData.swiperItemLength - 1 && direction === 'up'))
|
|||
|
|
) {
|
|||
|
|
// 判断触摸的时间和移动的距离是否超过了当前itemHeight的一半，如果是则执行切换操作
|
|||
|
|
// console.log(currentTime - state.touchStartTime, Math.abs(currentTouchRelactive.y - state.touchRelactive.y));
|
|||
|
|
if ((currentTime - state.touchStartTime) > 200 && Math.abs(currentTouchRelactive.y - state.touchRelactive.y) < itemData.itemHeight / 2) {
|
|||
|
|
ownerInstance.callMethod('changeParentSwiperContainerStyleStatus',{
|
|||
|
|
status: 'reset'
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
// console.log(direction, state.touchRelactive.y, currentTouchRelactive.y);
|
|||
|
|
|
|||
|
|
ownerInstance.callMethod('updateParentSwiperContainerStyleWithDirection', {
|
|||
|
|
direction: direction
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 判断触摸移动方向
|
|||
|
|
var direction = decideSwiperDirection(state.touchRelactive, currentTouchRelactive, false)
|
|||
|
|
// 判断是否为衔接轮播，如果不是衔接轮播，如果当前为第一个swiperItem并且向右滑、当前为最后一个swiperItem并且向左滑时不进行操作
|
|||
|
|
if (containerData.circular ||
|
|||
|
|
!((state.currentIndex === 0 && direction === 'right') || (state.currentIndex === containerData.swiperItemLength - 1 && direction === 'left'))
|
|||
|
|
) {
|
|||
|
|
// 判断触摸的时间和移动的距离是否超过了当前itemWidth的一半，如果是则执行切换操作
|
|||
|
|
// console.log(currentTime - state.touchStartTime, Math.abs(currentTouchRelactive.x - state.touchRelactive.x));
|
|||
|
|
if ((currentTime - state.touchStartTime) > 200 && Math.abs(currentTouchRelactive.x - state.touchRelactive.x) < itemData.itemWidth / 2) {
|
|||
|
|
ownerInstance.callMethod('changeParentSwiperContainerStyleStatus',{
|
|||
|
|
status: 'reset'
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
// console.log(direction, state.touchRelactive.x, currentTouchRelactive.x);
|
|||
|
|
|
|||
|
|
ownerInstance.callMethod('updateParentSwiperContainerStyleWithDirection', {
|
|||
|
|
direction: direction
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 清除标记
|
|||
|
|
state.touchId = null
|
|||
|
|
state.touchRelactive = null
|
|||
|
|
state.touchStartTime = 0
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 标记停止触摸
|
|||
|
|
state.touching = true
|
|||
|
|
ownerInstance.callMethod('updateTouchingStatus', {
|
|||
|
|
status: false
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
module.exports = {
|
|||
|
|
itemDataObserver: itemDataObserver,
|
|||
|
|
currentIndexObserver: currentIndexObserver,
|
|||
|
|
containerDataObserver: containerDataObserver,
|
|||
|
|
touchStart: touchStart,
|
|||
|
|
touchMove: touchMove,
|
|||
|
|
touchEnd: touchEnd
|
|||
|
|
}
|