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 }