yunshangxie/tuniao-ui/components/tn-swipe-action-item/index.wxs

230 lines
8.5 KiB
XML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* 此为wxs模块只支持APP-VUE微信和QQ小程序以及H5平台
* wxs内部不支持es6语法变量只能使用var定义无法使用解构箭头函数等特性
*/
// 开始触摸
function touchStart(event, ownerInstance) {
// 触发事件的组件的ComponentDescriptor实例
var instance = event.instance
// wxs内的局部变量快照此快照是属于整个组件在touchstart和touchmove事件中都能获取到相同的结果
var state = instance.getState()
if (state.disabled) return
var touches = event.touches
// 如果进行的是多指触控,不允许操作
if (touches && touches.length > 1) return
// 标识当前为滑动中状态
state.moving = true
// 记录触摸开始点的坐标点
state.startX = touches[0].pageX
state.startY = touches[0].pageY
// 记录开始触摸的时间
state.touchStartTime = getDate().getTime()
ownerInstance.callMethod('closeOther')
}
// 触摸滑动
function touchMove(event, ownerInstance) {
// 触发事件的组件的ComponentDescriptor实例
var instance = event.instance
// wxs内的局部变量快照此快照是属于整个组件在touchstart和touchmove事件中都能获取到相同的结果
var state = instance.getState()
if (state.disabled || !state.moving) return
var touches = event.touches
var pageX = touches[0].pageX
var pageY = touches[0].pageY
var moveX = pageX - state.startX
var moveY = pageY - state.startY
var buttonsWidth = state.buttonsWidth
// 移动的X轴距离大于Y轴距离也即终点与起点位置连线与X轴夹角小于45度时禁止页面滚动
if (Math.abs(moveX) > Math.abs(moveY) || Math.abs(moveX) > state.threshold) {
// event.preventDefault && event.preventDefault()
// event.stopPropagation && event.stopPropagation()
}
// 移动的Y轴距离大于X轴距离也即终点与起点位置连线与Y轴夹角小于45度时认为页面时上下滑动而不是左右滑动单元格
if (Math.abs(moveX) < Math.abs(moveY)) return
// X0
// return0
if (state.status === 'open') {
//
if (moveX < 0) moveX = 0
//
if (moveX > buttonsWidth) moveX = buttonsWidth
// 如果是已经打开的状态,向左滑动时,移动收起菜单
moveSwipeAction(-buttonsWidth + moveX, instance, ownerInstance)
} else {
// 关闭状态下,忽略右滑
if (moveX > 0) return
// 滑动的距离不允许超过所有按钮的总宽度,此时只能左滑
// 滑动距离设置为按钮的宽度(负数)
if (Math.abs(moveX) > buttonsWidth) moveX = -buttonsWidth
// 在滑动过程中不断移动单元格内容,使其不断显示出来
moveSwipeAction(moveX, instance, ownerInstance)
}
}
// 触摸结束
function touchEnd(event, ownerInstance) {
// 触发事件的组件的ComponentDescriptor实例
var instance = event.instance
// wxs内的局部变量快照此快照是属于整个组件在touchstart和touchmove事件中都能获取到相同的结果
var state = instance.getState()
if (!state.moving || state.disabled) return
var touches = event.changedTouches ? event.changedTouches[0] : {}
var pageX = touches.pageX
var pageY = touches.pageY
var moveX = pageX - state.startX
if (state.status === 'open') {
// 在开启状态下,忽略左滑动
if (moveX < 0) moveX = 0
// moveX0
if (moveX === 0) {
return closeSwipeAction(instance, ownerInstance)
}
//
if (Math.abs(moveX) < state.threshold) {
openSwipeAction(instance, ownerInstance)
} else {
//
closeSwipeAction(instance, ownerInstance)
}
} else {
//
var touchEndTime = getDate().getTime()
//
if (Math.abs(pageX - state.startX) < 5 && Math.abs(pageY - state.startY) < 5 && touchEndTime - state.touchStartTime < 100) {
ownerInstance.callMethod('handlerItemClick')
}
//
if (moveX > 0) return
if (Math.abs(moveX) < state.threshold) {
closeSwipeAction(instance, ownerInstance)
} else {
openSwipeAction(instance, ownerInstance)
}
}
}
//
function getDuration(value) {
if (value.toString().indexOf('s') >= 0) return value
return value > 30 ? value + 'ms' : value + 's'
}
// 移动滑动选择器内容区域,同时显示出其隐藏的菜单
function moveSwipeAction(moveX, instance, ownerInstance) {
var state = instance.getState()
// 获取所有按钮的实例,需要通过它去设置按钮的位移
var buttons = ownerInstance.selectAllComponents('.tn-swipe-action-item__right__button')
// 设置菜单内容部分的偏移
instance.requestAnimationFrame(function () {
instance.setStyle({
// 设置translateX的值
'transition': 'none',
transform: 'translateX('+ moveX +'px)',
'-webkit-transform': 'translateX('+ moveX +'px)'
})
})
}
// 一次性展开滑动菜单
function openSwipeAction(instance, ownerInstance) {
var state = instance.getState()
// 获取所有按钮的实例,需要通过它去设置按钮的位移
var buttons = ownerInstance.selectAllComponents('.tn-swipe-action-item__right__button')
// 处理duration单位问题
var duration = getDuration(state.duration)
// 展开过程中是向左移动所以x的偏移应该是负值
var buttonsWidth = -state.buttonsWidth
instance.requestAnimationFrame(function () {
// 设置菜单主体内容
instance.setStyle({
'transition': 'transform ' + duration,
'transform': 'translateX('+ buttonsWidth +'px)',
'-webkit-transform': 'translateX('+ buttonsWidth +'px)'
})
})
setStatus('open', instance, ownerInstance)
}
// 一次性收起滑动菜单
function closeSwipeAction(instance, ownerInstance) {
var state = instance.getState()
// 获取所有按钮的实例,需要通过它去设置按钮的位移
var buttons = ownerInstance.selectAllComponents('.tn-swipe-action-item__right__button')
var len = buttons.length
// 处理duration单位问题
var duration = getDuration(state.duration)
instance.requestAnimationFrame(function () {
// 设置菜单主体内容
instance.setStyle({
'transition': 'transform ' + duration,
'transform': 'translateX(0px)',
'-webkit-transform': 'translateX(0px)'
})
// 设置各个隐藏按钮的收起状态
for (var i = len - 1; i >= 0; i--) {
buttons[i].setStyle({
'transition': 'transform ' + duration,
'transform': 'translateX(0px)',
'-webkit-transform': 'translateX(0px)'
})
}
})
setStatus('close', instance, ownerInstance)
}
// 标记菜单的当前状态open - 打开 close - 关闭
function setStatus(status, instance, ownerInstance) {
var state = instance.getState()
state.status = status
ownerInstance.callMethod('setStatus', status)
}
// status的状态发生变化
function statusChange(newValue, oldValue, ownerInstance, instance) {
var state = instance.getState()
if (state.disabled) return
// 打开或关闭单元格
if (newValue === 'close' && state.status === 'open') {
closeSwipeAction(instance, ownerInstance)
} else if (newValue === 'open' && state.status === 'close') {
openSwipeAction(instance, ownerInstance)
}
}
// 菜单尺寸发生变化
function sizeChange(newValue, oldValue, ownerInstance, instance) {
// wxs内的局部变量快照
var state = instance.getState()
state.disabled = newValue.disabled
state.duration = newValue.duration
state.show = newValue.show
state.threshold = newValue.threshold
state.buttons = newValue.buttons
if (state.buttons) {
var len = state.buttons.length
var buttonsWidth = 0
var buttons = newValue.buttons
for (var i = 0; i < len; i++) {
buttonsWidth += buttons[i].width
}
}
state.buttonsWidth = buttonsWidth
}
module.exports = {
touchStart: touchStart,
touchMove: touchMove,
touchEnd: touchEnd,
sizeChange: sizeChange,
statusChange: statusChange
}