/* eslint-disable */ var touchstart = function(event, ownerInstance) { var ins = event.instance var st = ins.getState() if (st.disable) return // disable的逻辑 // console.log('touchstart st', JSON.stringify(st)) if (!st.size) return // console.log('touchstart', JSON.stringify(event)) st.isMoving = true st.startX = event.touches[0].pageX st.startY = event.touches[0].pageY st.firstAngle = 0 } var touchmove = function(event, ownerInstance) { var ins = event.instance var st = ins.getState() if (!st.size || !st.isMoving) return // console.log('touchmove', JSON.stringify(event)) var pagex = event.touches[0].pageX - st.startX var pagey = event.touches[0].pageY - st.startY // 左侧45度角为界限,大于45度则允许水平滑动 if (st.firstAngle === 0) { st.firstAngle = Math.abs(pagex) - Math.abs(pagey) } if (st.firstAngle < 0) { return } var movex = pagex > 0 ? Math.min(st.max, pagex) : Math.max(-st.max, pagex) // 往回滑动的情况 if (st.out) { // 已经是划出来了,还要往左滑动,忽略 if (movex < 0) return ins.setStyle({ 'transform': 'translateX(' + (st.transformx + movex) + 'px)', 'transition': '' }) var btns = ownerInstance.selectAllComponents('.btn') var transformTotal = 0 var len = btns.length var i = len - 1; for (;i >= 0; i--) { var transform = st.size.buttons[i].width / st.max * movex var transformx = st.size.buttons[i].max - Math.min(st.size.buttons[i].max, transform + transformTotal) btns[i].setStyle({ 'transform': 'translateX(' + (-transformx) + 'px)', 'transition': '' }) transformTotal += transform } return false } if (movex > 0) movex = 0 ins.setStyle({ 'transform': 'translateX(' + movex + 'px)', 'transition': '' }) st.transformx = movex var btns = ownerInstance.selectAllComponents('.btn') var transformTotal = 0 var len = btns.length var i = len - 1; for (;i >= 0; i--) { var transform = st.size.buttons[i].width / st.max * movex var transformx = Math.max(-st.size.buttons[i].max, transform + transformTotal) btns[i].setStyle({ 'transform': 'translateX(' + transformx + 'px)', 'transition': '' }) st.size.buttons[i].transformx = transformx transformTotal += transform } return false // 禁止垂直方向的滑动 } var touchend = function(event, ownerInstance) { var ins = event.instance var st = ins.getState() if (!st.size || !st.isMoving) return // 左侧45度角为界限,大于45度则允许水平滑动 if (st.firstAngle < 0) { return } var duration = st.duration / 1000 st.isMoving = false // console.log('touchend', JSON.stringify(event)) var btns = ownerInstance.selectAllComponents('.btn') var len = btns.length var i = len - 1 // console.log('len size', len) if (Math.abs(event.changedTouches[0].pageX - st.startX) < st.throttle || event.changedTouches[0].pageX - st.startX > 0) { // 方向也要控制 st.out = false ins.setStyle({ 'transform': 'translate3d(0px, 0, 0)', 'transition': 'transform ' + (duration) + 's' }) for (;i >= 0; i--) { btns[i].setStyle({ 'transform': 'translate3d(0px, 0, 0)', 'transition': 'transform ' + (duration) + 's' }) } ownerInstance.callMethod('hide') return } showButtons(ins, ownerInstance, duration) ownerInstance.callMethod('show') } var REBOUNCE_TIME = 0.2 var showButtons = function(ins, ownerInstance, withDuration) { var st = ins.getState() if (!st.size) return var rebounceTime = st.rebounce ? REBOUNCE_TIME : 0 var movex = st.max st.out = true var btns = ownerInstance.selectAllComponents('.btn') var rebounce = st.rebounce || 0 var len = btns.length var i = len - 1 ins.setStyle({ 'transform': 'translate3d(' + (-movex - rebounce) + 'px, 0, 0)', 'transition': 'transform ' + (withDuration) + 's' }) st.transformx = -movex var transformTotal = 0 for (;i >= 0; i--) { var transform = st.size.buttons[i].width / st.max * movex var transformx = (-(transform + transformTotal)) btns[i].setStyle({ 'transform': 'translate3d(' + transformx + 'px, 0, 0)', 'transition': 'transform ' + (withDuration ? withDuration + rebounceTime : withDuration) + 's' }) st.size.buttons[i].transformx = transformx transformTotal += transform } } var innerHideButton = function(ownerInstance) { var ins = ownerInstance.selectComponent('.left') var st = ins.getState() if (!st.size) return var duration = st.duration ? st.duration / 1000 : 0 var btns = ownerInstance.selectAllComponents('.btn') var len = btns.length var i = len - 1 ins.setStyle({ 'transform': 'translate3d(0px, 0, 0)', 'transition': 'transform ' + (duration) + 's' }) st.transformx = 0 for (;i >= 0; i--) { btns[i].setStyle({ 'transform': 'translate3d(0px, 0, 0)', 'transition': 'transform ' + (duration) + 's' }) st.size.buttons[i].transformx = 0 } } var hideButton = function(event, ownerInstance) { innerHideButton(ownerInstance) ownerInstance.callMethod('buttonTapByWxs', {index: event.currentTarget.dataset.index, data: event.currentTarget.dataset.data}) return false } var sizeReady = function(newVal, oldVal, ownerInstance, ins) { var st = ins.getState() // st.disable = newVal && newVal.disable if (newVal && newVal.button && newVal.buttons) { st.size = newVal st.transformx = 0 // var min = newVal.button.width var max = 0 var len = newVal.buttons.length var i = newVal.buttons.length - 1; var total = 0 for (; i >= 0; i--) { max += newVal.buttons[i].width // if (min > newVal.buttons[i]) { // min = newVal.buttons[i].width // } total += newVal.buttons[i].width newVal.buttons[i].max = total newVal.buttons[i].transformx = 0 } st.throttle = st.size.throttle || 40 // 固定值 st.rebounce = st.size.rebounce st.max = max ownerInstance.selectComponent('.right').setStyle({ 'line-height': newVal.button.height + 'px', left: (newVal.button.width) + 'px', width: max + 'px' }) // console.log('st size', JSON.stringify(newVal)) if (!st.size.disable && st.size.show) { showButtons(ins, ownerInstance) } } } var disableChange = function(newVal, oldVal, ownerInstance, ins) { var st = ins.getState() st.disable = newVal } var durationChange = function(newVal, oldVal, ownerInstance, ins) { var st = ins.getState() st.duration = newVal || 400 } var showChange = function(newVal, oldVal, ownerInstance, ins) { var st = ins.getState() st.show = newVal if (st.disable) return // console.log('show change') if (st.show) { showButtons(ins, ownerInstance, st.duration) } else { innerHideButton(ownerInstance) } } var rebounceChange = function(newVal, oldVal, ownerInstance, ins) { var st = ins.getState() // console.log('rebounce', st.rebounce) st.rebounce = newVal } var transitionEnd = function(event, ownerInstance) { // console.log('transition') var ins = event.instance var st = ins.getState() // 回弹效果 if (st.out && st.rebounce) { // console.log('transition rebounce', st.rebounce) ins.setStyle({ 'transform': 'translate3d(' + (-st.max) + 'px, 0, 0)', 'transition': 'transform ' + REBOUNCE_TIME +'s' }) } } module.exports = { touchstart: touchstart, touchmove: touchmove, touchend: touchend, hideButton: hideButton, sizeReady: sizeReady, disableChange: disableChange, durationChange: durationChange, showChange: showChange, rebounceChange: rebounceChange, transitionEnd: transitionEnd }