406 lines
13 KiB
XML
406 lines
13 KiB
XML
function touchstart(event, ins) {
|
|
var state = ins.getState()
|
|
if (state.isTouch || state.disableTouch) {
|
|
return
|
|
}
|
|
state.isTouch = true
|
|
state.touchTime = 0
|
|
state.interval = true
|
|
setInterval(ins)
|
|
var touch = event.touches[0]
|
|
state.startX = touch.pageX
|
|
state.startY = touch.pageY
|
|
}
|
|
|
|
function touchmove(event, ins) {
|
|
var state = ins.getState();
|
|
if (state.isTouch && !state.disableTouch) {
|
|
var touch = event.touches[0]
|
|
state.offset = state.vertical ? touch.pageY - state.startY : touch.pageX - state.startX;
|
|
if (state.direction) {
|
|
var rect = ins.getBoundingClientRect()
|
|
var size = state.vertical ? rect.height : rect.width
|
|
state.offset = state.direction == 'next' ? state.offset + state.sliderFault : state.offset - state
|
|
.sliderFault
|
|
// if (state.direction == 'next' && state.readChapterFlag) {
|
|
// return;
|
|
// }
|
|
if ((state.offset > 0 && state.direction == 'next') || (state.offset < 0 && state.direction == 'prev')) {
|
|
state.offset = 0
|
|
}
|
|
if (Math.abs(state.offset) <= size) {
|
|
animation(state.offset, 0, ins)
|
|
}
|
|
} else {
|
|
if (Math.abs(state.offset) < state.sliderFault) {
|
|
return
|
|
}
|
|
if (state.offset < 0) {
|
|
if (state.nextIndex < state.count && state.nextIndex != 0) {
|
|
if (state.type != 'none') {
|
|
state.direction = 'next'
|
|
}
|
|
} else if (state.pullupable && state.loadingState != 'loading' && state.loadingState != 'success' &&
|
|
state.loadingState != 'fail') {
|
|
state.loadingType = 'pullup'
|
|
state.offset = state.offset + state.sliderFault
|
|
pulling(state.offset, ins)
|
|
}
|
|
} else {
|
|
if (state.prevIndex >= 0 && state.prevIndex != state.count - 1) {
|
|
if (state.type != 'none') {
|
|
state.direction = 'prev'
|
|
}
|
|
} else if (state.pulldownable && state.loadingState != 'loading' && state.loadingState != 'success' &&
|
|
state.loadingState != 'fail') {
|
|
state.loadingType = 'pulldown'
|
|
state.offset = state.offset - state.sliderFault
|
|
pulling(state.offset, ins)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function touchend(event, ins) {
|
|
touchaction(event, ins)
|
|
}
|
|
|
|
function touchcancel(event, ins) {
|
|
touchaction(event, ins)
|
|
}
|
|
|
|
function touchaction(event, ins, isFlipTo) {
|
|
var state = ins.getState();
|
|
console.log(state,"statestate")
|
|
clearInterval(ins)
|
|
if (state.isTouch && !state.disableTouch) {
|
|
var rect = ins.getBoundingClientRect()
|
|
var size = state.vertical ? rect.height : rect.width
|
|
var start = state.vertical ? state.startY : state.startX
|
|
if (!state.direction && state.touchTime <= 200 && (!state.unableClickPage || state.type == 'none') && !
|
|
isFlipTo) {
|
|
//获取点击位置，判断向哪里翻页
|
|
if (start > (size / 4) * 3 && state.nextIndex < state.count && state.nextIndex != 0) {
|
|
state.direction = 'next';
|
|
}
|
|
if (start < (size / 4) && state.prevIndex >= 0 && state.prevIndex != state.count - 1) {
|
|
state.direction = 'prev'
|
|
}
|
|
}
|
|
if (state.direction) {
|
|
// if (state.direction = 'next' && state.readChapterFlag) {
|
|
// uni.showToast({
|
|
// icon: 'none',
|
|
// title: '当前章节未解锁,暂不支持跳章节观看',
|
|
// })
|
|
// return;
|
|
// }
|
|
state.disableTouch = true
|
|
if (state.touchTime <= 200) {
|
|
var duration = state.type == 'none' ? 0 : state.duration;
|
|
var value = state.direction == 'next' ? 1 : -1;
|
|
animation(-value * size, duration, ins);
|
|
ins.setTimeout(function() {
|
|
resetShadow(ins, true)
|
|
ins.callMethod('handleFlipChange', value);
|
|
}, duration + 50)
|
|
} else {
|
|
var duration = state.type == 'none' ? 0 : state.duration;
|
|
if (Math.abs(state.offset) >= size / 4) {
|
|
var value = state.direction == 'next' ? 1 : -1;
|
|
animation(-value * size, duration, ins);
|
|
ins.setTimeout(function() {
|
|
resetShadow(ins, true)
|
|
ins.callMethod('handleFlipChange', value);
|
|
}, duration + 50)
|
|
} else {
|
|
animation(0, duration, ins);
|
|
ins.setTimeout(function() {
|
|
resetShadow(ins)
|
|
resetFlip(ins);
|
|
}, duration + 50)
|
|
}
|
|
}
|
|
} else if (state.loadingState == 'default') {
|
|
resetPulling(ins)
|
|
} else if (state.loadingState == 'ready') {
|
|
pullingRefresh(ins)
|
|
} else {
|
|
resetShadow(ins, false)
|
|
resetFlip(ins)
|
|
}
|
|
}
|
|
}
|
|
|
|
function propWatcher(newVal, oldVal, ins) {
|
|
ins.setTimeout(function() {
|
|
var state = ins.getState()
|
|
state.vertical = newVal.vertical
|
|
state.pulldownable = newVal.pulldownable
|
|
state.pullupable = newVal.pullupable
|
|
state.pulldownHeight = newVal.pulldownHeight
|
|
state.loadingState = newVal.loadingState
|
|
state.pullupHeight = newVal.pullupHeight
|
|
state.duration = newVal.duration
|
|
state.nextIndex = newVal.nextIndex
|
|
state.prevIndex = newVal.prevIndex
|
|
state.currentIndex = newVal.currentIndex
|
|
state.sliderFault = newVal.sliderFault
|
|
state.count = newVal.count
|
|
state.type = newVal.type
|
|
state.unableClickPage = newVal.unableClickPage
|
|
state.readChapterFlag = newVal.readChapterFlag
|
|
state.translate = newVal.translate
|
|
if (oldVal && newVal.currentIndex != oldVal.currentIndex) {
|
|
resetFlip(ins);
|
|
}
|
|
if (oldVal && newVal.loadingState != oldVal.loadingState && state.loadingState) {
|
|
resetPulling(ins)
|
|
ins.callMethod('resetLoading')
|
|
}
|
|
if (oldVal && newVal.flipTo != oldVal.flipTo && newVal.flipTo != 0) {
|
|
if (!state.disableTouch) {
|
|
if (newVal.flipTo < 0 && state.prevIndex >= 0 && (state.prevIndex != state.count - 1)) {
|
|
state.isTouch = true
|
|
state.touchTime = 0
|
|
state.direction = 'prev'
|
|
touchaction(null, ins, true)
|
|
}
|
|
if (newVal.flipTo > 0 && state.nextIndex < state.count && state.nextIndex != 0) {
|
|
state.isTouch = true
|
|
state.touchTime = 0
|
|
state.direction = 'next'
|
|
touchaction(null, ins, true)
|
|
}
|
|
}
|
|
}
|
|
}, 100)
|
|
}
|
|
|
|
function setInterval(ins) {
|
|
var state = ins.getState()
|
|
state.touchTimer = ins.setTimeout(function() {
|
|
state.touchTime += 10
|
|
if (state.interval) {
|
|
setInterval(ins)
|
|
}
|
|
}, 10)
|
|
}
|
|
|
|
function clearInterval(ins) {
|
|
var state = ins.getState()
|
|
state.interval = false
|
|
if (state.touchTimer) {
|
|
ins.clearTimeout(state.touchTimer)
|
|
state.touchTimer = null
|
|
}
|
|
}
|
|
|
|
function resetShadow(ins, isChange) {
|
|
var state = ins.getState()
|
|
var direction = state.direction
|
|
if (!direction) {
|
|
return
|
|
}
|
|
var index = direction == 'next' ? state.currentIndex : state.prevIndex
|
|
var translate = state.translate
|
|
var rect = ins.getBoundingClientRect()
|
|
var size = state.vertical ? rect.height : rect.width;
|
|
var draw = function() {
|
|
ins.selectComponent('.yingbing-flip-item_' + index).setStyle({
|
|
'box-shadow': '',
|
|
transform: translate + '(' + (isChange ? (direction == 'next' ? -size : 0) : (direction ==
|
|
'next' ? 0 : -size)) + 'px)',
|
|
transition: ''
|
|
})
|
|
if (state.type == 'real') {
|
|
ins.selectComponent('.yingbing-flip-item-bg_' + index).setStyle({
|
|
'box-shadow': '',
|
|
transform: translate + '(' + (isChange ? (direction == 'next' ? 0 : size) : (direction ==
|
|
'next' ? size : 0)) + 'px)',
|
|
transition: ''
|
|
})
|
|
}
|
|
ins.selectComponent('.yingbing-flip-item-shadow_' + index).setStyle({
|
|
'box-shadow': '',
|
|
transition: ''
|
|
})
|
|
}
|
|
ins.requestAnimationFrame(draw)
|
|
}
|
|
|
|
function resetFlip(ins) {
|
|
var state = ins.getState()
|
|
state.direction = null
|
|
state.isTouch = false
|
|
state.disableTouch = false
|
|
state.offset = 0
|
|
state.touchTime = 0
|
|
state.startX = 0
|
|
state.startY = 0
|
|
}
|
|
|
|
function animation(offset, duration, ins, noshadow) {
|
|
var state = ins.getState()
|
|
var rect = ins.getBoundingClientRect()
|
|
var size = state.vertical ? rect.height : rect.width
|
|
var translate = state.translate
|
|
var late = offset
|
|
var draw = function() {
|
|
if (state.direction == 'prev') {
|
|
if (state.prevIndex >= 0) {
|
|
ins.selectComponent('.yingbing-flip-item_' + state.prevIndex).setStyle({
|
|
transform: translate + '(' + (late - size) + 'px)',
|
|
'box-shadow': noshadow ? '' : state.type == 'real' ? '0 0 30px 20px rgba(0,0,0,0.4)' :
|
|
state.type == 'cover' ? '0 0 10px 5px rgba(0,0,0,0.3)' : '',
|
|
transition: duration > 0 ? 'transform ' + duration + 'ms' : ''
|
|
})
|
|
if (state.type == 'real') {
|
|
ins.selectComponent('.yingbing-flip-item-content_' + state.prevIndex).setStyle({
|
|
transform: translate + '(' + (size - late) + 'px)',
|
|
transition: duration > 0 ? 'transform ' + duration + 'ms' : ''
|
|
})
|
|
ins.selectComponent('.yingbing-flip-item-bg_' + state.prevIndex).setStyle({
|
|
transform: translate + '(' + (late) + 'px)',
|
|
'box-shadow': noshadow ? '' : '-5px 0 20px rgba(0,0,0,0.1)',
|
|
transition: duration > 0 ? 'transform ' + duration + 'ms, ' + 'boxShadow ' +
|
|
duration + 'ms' : ''
|
|
})
|
|
ins.selectComponent('.yingbing-flip-item-shadow_' + state.prevIndex).setStyle({
|
|
'box-shadow': noshadow ? '' : '0 0 60px 30px rgba(0,0,0,0.4)',
|
|
transition: duration > 0 ? 'boxShadow ' + duration + 'ms' : ''
|
|
})
|
|
}
|
|
}
|
|
} else {
|
|
if (state.nextIndex < state.count) {
|
|
ins.selectComponent('.yingbing-flip-item_' + state.nextIndex).setStyle({
|
|
transform: translate + '(0)',
|
|
transition: ''
|
|
})
|
|
}
|
|
ins.selectComponent('.yingbing-flip-item_' + state.currentIndex).setStyle({
|
|
transform: translate + '(' + late + 'px)',
|
|
'box-shadow': noshadow ? '' : state.type == 'real' ? '0 0 30px 20px rgba(0,0,0,0.4)' : state
|
|
.type == 'cover' ? '0 0 10px 5px rgba(0,0,0,0.3)' : '',
|
|
transition: duration > 0 ? 'transform ' + duration + 'ms' : ''
|
|
})
|
|
if (state.type == 'real') {
|
|
ins.selectComponent('.yingbing-flip-item-content_' + state.currentIndex).setStyle({
|
|
transform: translate + '(' + (-late) + 'px)',
|
|
transition: duration > 0 ? 'transform ' + duration + 'ms' : ''
|
|
})
|
|
ins.selectComponent('.yingbing-flip-item-bg_' + state.currentIndex).setStyle({
|
|
transform: translate + '(' + (late + size) + 'px)',
|
|
'box-shadow': noshadow ? '' : '-5px 0 20px rgba(0,0,0,0.1)',
|
|
transition: duration > 0 ? 'transform ' + duration + 'ms, ' + 'boxShadow ' + duration +
|
|
'ms' : ''
|
|
})
|
|
ins.selectComponent('.yingbing-flip-item-shadow_' + state.currentIndex).setStyle({
|
|
'box-shadow': noshadow ? '' : '0 0 60px 30px rgba(0,0,0,0.4)',
|
|
transition: duration > 0 ? 'boxShadow ' + duration + 'ms' : ''
|
|
})
|
|
}
|
|
}
|
|
}
|
|
ins.requestAnimationFrame(draw)
|
|
}
|
|
|
|
function pulling(offset, ins) {
|
|
var state = ins.getState()
|
|
var loadingType = state.loadingType
|
|
var translate = state.translate
|
|
var size = loadingType == 'pullup' ? state.pullupHeight : state.pulldownHeight
|
|
var late = offset
|
|
if (Math.abs(state.offset) < size) {
|
|
state.loadingState = 'default'
|
|
} else {
|
|
state.loadingState = 'ready'
|
|
}
|
|
var draw = function() {
|
|
var pullingItems = ins.selectAllComponents('.yingbing-flip-' + loadingType + '-item')
|
|
for (var i = 0; i < pullingItems.length; i++) {
|
|
if (pullingItems[i].hasClass('yingbing-flip-' + loadingType + '-' + state.loadingState)) {
|
|
pullingItems[i].setStyle({
|
|
visibility: 'visible'
|
|
})
|
|
} else {
|
|
pullingItems[i].setStyle({
|
|
visibility: 'hidden'
|
|
})
|
|
}
|
|
}
|
|
if (Math.abs(late) <= size) {
|
|
ins.selectComponent('.yingbing-flip-' + loadingType).setStyle({
|
|
transform: translate + '(' + (loadingType == 'pullup' ? late + size : late - size) + 'px)',
|
|
transition: ''
|
|
})
|
|
}
|
|
}
|
|
ins.requestAnimationFrame(draw)
|
|
}
|
|
|
|
function resetPulling(ins) {
|
|
var state = ins.getState()
|
|
var loadingType = state.loadingType
|
|
var translate = state.translate
|
|
var size = loadingType == 'pullup' ? state.pullupHeight : state.pulldownHeight
|
|
var draw = function() {
|
|
var pullingItems = ins.selectAllComponents('.yingbing-flip-' + loadingType + '-item')
|
|
for (var i = 0; i < pullingItems.length; i++) {
|
|
if (pullingItems[i].hasClass('yingbing-flip-' + loadingType + '-' + state.loadingState)) {
|
|
pullingItems[i].setStyle({
|
|
visibility: 'visible'
|
|
})
|
|
} else {
|
|
pullingItems[i].setStyle({
|
|
visibility: 'hidden'
|
|
})
|
|
}
|
|
}
|
|
ins.selectComponent('.yingbing-flip-' + loadingType).setStyle({
|
|
transform: translate + '(' + (loadingType == 'pullup' ? size : -size) + 'px)',
|
|
transition: 'transform .3s'
|
|
})
|
|
}
|
|
ins.requestAnimationFrame(draw)
|
|
if (state.loadingState) {
|
|
ins.setTimeout(function() {
|
|
state.loadingState = ''
|
|
resetPulling(ins)
|
|
}, 300)
|
|
} else {
|
|
state.loadingType = ''
|
|
resetFlip(ins)
|
|
}
|
|
}
|
|
|
|
function pullingRefresh(ins) {
|
|
var state = ins.getState()
|
|
state.loadingState = 'loading'
|
|
var loadingType = state.loadingType
|
|
var draw = function() {
|
|
var pullingItems = ins.selectAllComponents('.yingbing-flip-' + loadingType + '-item')
|
|
for (var i = 0; i < pullingItems.length; i++) {
|
|
if (pullingItems[i].hasClass('yingbing-flip-' + loadingType + '-loading')) {
|
|
pullingItems[i].setStyle({
|
|
visibility: 'visible'
|
|
})
|
|
} else {
|
|
pullingItems[i].setStyle({
|
|
visibility: 'hidden'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
ins.requestAnimationFrame(draw)
|
|
ins.callMethod('pullingRefresh', state.loadingType)
|
|
}
|
|
module.exports = {
|
|
touchstart: touchstart,
|
|
touchmove: touchmove,
|
|
touchend: touchend,
|
|
touchcancel: touchcancel,
|
|
propWatcher: propWatcher
|
|
} |