You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
3.4 KiB
116 lines
3.4 KiB
var max = 200
|
|
var refreshHeight = 80
|
|
function touchstart(event, ins) {
|
|
console.log('touchstart');
|
|
var state = ins.getState()
|
|
if ( state.refresh ) return
|
|
var touch = event.touches[0] || event.changedTouches[0]
|
|
state.startX = touch.pageX
|
|
state.startY = touch.pageY
|
|
}
|
|
function touchmove(event, ins) {
|
|
console.log('touchmove');
|
|
var state = ins.getState()
|
|
if ( state.refresh ) return
|
|
if ( state.startY > 0) {
|
|
var touch = event.touches[0] || event.changedTouches[0]
|
|
if ((Math.abs(touch.pageY - state.startY) > Math.abs(touch.pageX - state.startX)) && Math.abs(touch.pageY - state.startY) > 20) {
|
|
var pageY = touch.pageY
|
|
var rate = max / (max + Math.abs(pageY - state.startY))
|
|
state.threshold = rate * (pageY - state.startY)
|
|
if ( state.threshold > 0 && !state.pulldownable ) return
|
|
if ( state.threshold < 0 && !state.pullupable ) return
|
|
if ( state.threshold > max ) {
|
|
state.threshold = max
|
|
}
|
|
if ( state.threshold < -max ) {
|
|
state.threshold = -max
|
|
}
|
|
ins.selectComponent('.yingbing-scroller-wrapper').setStyle({
|
|
transform: 'translateY(' + state.threshold + 'px)',
|
|
transition: ''
|
|
})
|
|
if ( state.threshold > 0 ) {
|
|
ins.callMethod('pullingdown', state.threshold)
|
|
} else {
|
|
ins.callMethod('pullingup', Math.abs(state.threshold))
|
|
}
|
|
}
|
|
}
|
|
}
|
|
function touchend(event, ins) {
|
|
touchaction(event, ins)
|
|
}
|
|
function touchcancel(event, ins) {
|
|
touchaction(event, ins)
|
|
}
|
|
function touchaction (event, ins) {
|
|
var state = ins.getState()
|
|
if ( state.refresh ) return
|
|
if ( state.threshold > 0 && state.pulldownable ) {//下拉
|
|
if ( state.threshold > refreshHeight ) {//满足下拉条件
|
|
ins.selectComponent('.yingbing-scroller-wrapper').setStyle({
|
|
transform: 'translateY(' + refreshHeight + 'px)',
|
|
transition: 'transform .1s'
|
|
})
|
|
ins.callMethod('pulldown')
|
|
state.refresh = true
|
|
} else {//不满足下拉条件恢复样式
|
|
stop(ins)
|
|
}
|
|
}
|
|
if ( state.threshold < 0 && state.pullupable ) {//上拉
|
|
if ( Math.abs(state.threshold) > refreshHeight ) {//满足上拉条件
|
|
ins.selectComponent('.yingbing-scroller-wrapper').setStyle({
|
|
transform: 'translateY(-' + refreshHeight + 'px)',
|
|
transition: 'transform .1s'
|
|
})
|
|
ins.callMethod('pullup')
|
|
state.refresh = true
|
|
} else {//不满足上拉条件恢复样式
|
|
stop(ins)
|
|
}
|
|
}
|
|
}
|
|
function stop (ins) {
|
|
var state = ins.getState()
|
|
ins.selectComponent('.yingbing-scroller-wrapper').setStyle({
|
|
transform: 'translateY(0)',
|
|
transition: 'transform .1s'
|
|
})
|
|
state.threshold = 0
|
|
state.startY = 0
|
|
state.refresh = false
|
|
}
|
|
function refreshStateWatcher (newVal, oldVal, ins) {
|
|
if ( newVal == 'pulldown' ) {
|
|
var state = ins.getState()
|
|
state.threshold = refreshHeight + 1
|
|
state.refresh = false
|
|
touchaction(null, ins)
|
|
}
|
|
if ( newVal == 'pullup' ) {
|
|
var state = ins.getState()
|
|
state.threshold = -(refreshHeight + 1)
|
|
state.refresh = false
|
|
touchaction(null, ins)
|
|
}
|
|
if ( newVal == 'stop' ) stop(ins)
|
|
}
|
|
function pulldownableWatcher (newVal, oldVal, ins) {
|
|
var state = ins.getState()
|
|
if ( state ) state.pulldownable = newVal
|
|
}
|
|
function pullupableWatcher (newVal, oldVal, ins) {
|
|
var state = ins.getState()
|
|
if ( state ) state.pullupable = newVal
|
|
}
|
|
module.exports = {
|
|
refreshStateWatcher: refreshStateWatcher,
|
|
pulldownableWatcher: pulldownableWatcher,
|
|
pullupableWatcher: pullupableWatcher,
|
|
touchstart: touchstart,
|
|
touchmove: touchmove,
|
|
touchend: touchend,
|
|
touchcancel: touchcancel
|
|
}
|