mirror of
https://gitee.com/hhyykk/ipms-sjy.git
synced 2025-07-06 23:25:06 +08:00
使用 uview 重构实际登陆
This commit is contained in:
YunaiV
@ -0,0 +1,256 @@
|
||||
/**
|
||||
* 此为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.disable) return
|
||||
var touches = event.touches
|
||||
// 如果进行的是多指触控，不允许进行操作
|
||||
if (touches && touches.length > 1) return
|
||||
// 标识当前为滑动中状态
|
||||
state.moving = true
|
||||
// 记录触摸开始点的坐标值
|
||||
state.startX = touches[0].pageX
|
||||
state.startY = touches[0].pageY
|
||||
}
|
||||
|
||||
// 触摸滑动
|
||||
function touchmove(event, ownerInstance) {
|
||||
// 触发事件的组件的ComponentDescriptor实例
|
||||
var instance = event.instance
|
||||
// wxs内的局部变量快照
|
||||
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.stopPropagation()
|
||||
}
|
||||
// 如果移动的X轴距离小于Y轴距离，也即终点位置与起点位置连线，与Y轴夹角小于45度时，认为是页面上下滑动，而不是左右滑动单元格
|
||||
if (Math.abs(moveX) < Math.abs(moveY)) return
|
||||
|
||||
// 限制右滑的距离，不允许内容部分往右偏移，右滑会导致X轴偏移值大于0，以此做判断
|
||||
// 此处不能直接return，因为滑动过程中会缺失某些关键点坐标，会导致错乱，最好的办法就是
|
||||
// 在超出后，设置为0
|
||||
if (state.status === 'open') {
|
||||
// 在开启状态下，向左滑动，需忽略
|
||||
if (moveX < 0) moveX = 0
|
||||
// 想要收起菜单，最大能移动的距离为按钮的总宽度
|
||||
if (moveX > buttonsWidth) moveX = buttonsWidth
|
||||
// 如果是已经打开了的状态，向左滑动时，移动收起菜单
|
||||
moveSwipeAction(-buttonsWidth + moveX, instance, ownerInstance)
|
||||
} else {
|
||||
// 关闭状态下，右滑动需忽略
|
||||
if (moveX > 0) moveX = 0
|
||||
// 滑动的距离不允许超过所有按钮的总宽度，此时只能是左滑，最终设置按钮的总宽度，同时为负数
|
||||
if (Math.abs(moveX) > buttonsWidth) moveX = -buttonsWidth
|
||||
// 只要是在滑过程中，就不断移动菜单的内容部分，从而使隐藏的菜单显示出来
|
||||
moveSwipeAction(moveX, instance, ownerInstance)
|
||||
}
|
||||
}
|
||||
|
||||
// 触摸结束
|
||||
function touchend(event, ownerInstance) {
|
||||
// 触发事件的组件的ComponentDescriptor实例
|
||||
var instance = event.instance
|
||||
// wxs内的局部变量快照
|
||||
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) return
|
||||
// 在开启状态下，点击一下内容区域，moveX为0，也即没有进行移动，这时执行收起菜单逻辑
|
||||
if (moveX === 0) {
|
||||
return closeSwipeAction(instance, ownerInstance)
|
||||
}
|
||||
// 在开启状态下，滑动距离小于阈值，则默认为不关闭，同时恢复原来的打开状态
|
||||
if (Math.abs(moveX) < state.threshold) {
|
||||
openSwipeAction(instance, ownerInstance)
|
||||
} else {
|
||||
// 如果滑动距离大于阈值，则执行收起逻辑
|
||||
closeSwipeAction(instance, ownerInstance)
|
||||
}
|
||||
} else {
|
||||
// 在关闭的状态下，右滑，无需操作
|
||||
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 getMoveDirection(instance, ownerInstance) {
|
||||
var state = instance.getState()
|
||||
}
|
||||
|
||||
// 移动滑动选择器内容区域，同时显示出其隐藏的菜单
|
||||
function moveSwipeAction(moveX, instance, ownerInstance) {
|
||||
var state = instance.getState()
|
||||
// 获取所有按钮的实例，需要通过它去设置按钮的位移
|
||||
var buttons = ownerInstance.selectAllComponents('.u-swipe-action-item__right__button')
|
||||
var len = buttons.length
|
||||
var previewButtonsMoveX = 0
|
||||
|
||||
// 设置菜单内容部分的偏移
|
||||
instance.requestAnimationFrame(function() {
|
||||
instance.setStyle({
|
||||
// 设置translateX的值
|
||||
'transition': 'none',
|
||||
transform: 'translateX(' + moveX + 'px)',
|
||||
'-webkit-transform': 'translateX(' + moveX + 'px)'
|
||||
})
|
||||
// 折叠按钮动画
|
||||
for (var i = len - 1; i >= 0; i--) {
|
||||
// 通过比例，得出元素自身该移动的距离
|
||||
var translateX = state.buttons[i].width / state.buttonsWidth * moveX
|
||||
// 最终移动的距离，是通过自身比例算出的距离，再加上在它之前所有按钮移动的距离之和
|
||||
var realTranslateX = translateX + previewButtonsMoveX
|
||||
buttons[i].setStyle({
|
||||
// 在移动期间，不能使用过渡效果，否则会造成卡顿，本质原因是每次移动一点，就要花一定时间去过渡这个过程
|
||||
'transition': 'none',
|
||||
'transform': 'translateX(' + realTranslateX + 'px)',
|
||||
'-webkit-transform': 'translateX(' + realTranslateX + 'px)'
|
||||
})
|
||||
// 记录本按钮之前的所有按钮的移动距离之和
|
||||
previewButtonsMoveX += translateX
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 一次性展开滑动菜单
|
||||
function openSwipeAction(instance, ownerInstance) {
|
||||
var state = instance.getState()
|
||||
// 获取所有按钮的实例，需要通过它去设置按钮的位移
|
||||
var buttons = ownerInstance.selectAllComponents('.u-swipe-action-item__right__button')
|
||||
var len = buttons.length
|
||||
// 处理duration单位问题
|
||||
const duration = getDuration(state.duration)
|
||||
// 展开过程中，是向左移动，所以X的偏移应该为负值
|
||||
var buttonsWidth = -state.buttonsWidth
|
||||
var previewButtonsMoveX = 0
|
||||
instance.requestAnimationFrame(function() {
|
||||
// 设置菜单主体内容
|
||||
instance.setStyle({
|
||||
'transition': 'transform ' + duration,
|
||||
'transform': 'translateX(' + buttonsWidth + 'px)',
|
||||
'-webkit-transform': 'translateX(' + buttonsWidth + 'px)',
|
||||
})
|
||||
// 设置各个隐藏的按钮为展开的状态
|
||||
for (var i = len - 1; i >= 0; i--) {
|
||||
// 通过比例，得出元素自身该移动的距离
|
||||
var translateX = state.buttons[i].width / state.buttonsWidth * buttonsWidth
|
||||
// 最终移动的距离，是通过自身比例算出的距离，再加上在它之前所有按钮移动的距离之和
|
||||
var realTranslateX = translateX + previewButtonsMoveX
|
||||
buttons[i].setStyle({
|
||||
// 在移动期间，需要加上动画效果
|
||||
'transition': 'transform ' + duration,
|
||||
'transform': 'translateX(' + realTranslateX + 'px)',
|
||||
'-webkit-transform': 'translateX(' + realTranslateX + 'px)'
|
||||
})
|
||||
// 记录本按钮之前的所有按钮的移动距离之和
|
||||
previewButtonsMoveX += translateX
|
||||
}
|
||||
})
|
||||
setStatus('open', instance)
|
||||
}
|
||||
|
||||
// 标记菜单的当前状态，open-已经打开，close-已经关闭
|
||||
function setStatus(status, instance) {
|
||||
var state = instance.getState()
|
||||
state.status = status
|
||||
}
|
||||
|
||||
// 一次性收起滑动菜单
|
||||
function closeSwipeAction(instance, ownerInstance) {
|
||||
var state = instance.getState()
|
||||
// 获取所有按钮的实例，需要通过它去设置按钮的位移
|
||||
var buttons = ownerInstance.selectAllComponents('.u-swipe-action-item__right__button')
|
||||
var len = buttons.length
|
||||
// 处理duration单位问题
|
||||
const 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)
|
||||
}
|
||||
|
||||
// show的状态发生变化
|
||||
function showChange(newValue, oldValue, ownerInstance, instance) {
|
||||
var state = instance.getState()
|
||||
if (state.disabled) return
|
||||
// 打开或关闭单元格
|
||||
if (newValue) {
|
||||
openSwipeAction(instance, ownerInstance)
|
||||
} else {
|
||||
closeSwipeAction(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
|
||||
|
||||
var len = state.buttons.length
|
||||
if (len) {
|
||||
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
|
||||
}
|
||||
@ -0,0 +1,225 @@
|
||||
/**
|
||||
* 此为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
|
||||
|
||||
ownerInstance.callMethod('closeOther')
|
||||
}
|
||||
|
||||
// 触摸滑动
|
||||
function touchmove(event, ownerInstance) {
|
||||
// 触发事件的组件的ComponentDescriptor实例
|
||||
var instance = event.instance
|
||||
// wxs内的局部变量快照
|
||||
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()
|
||||
}
|
||||
// 如果移动的X轴距离小于Y轴距离，也即终点位置与起点位置连线，与Y轴夹角小于45度时，认为是页面上下滑动，而不是左右滑动单元格
|
||||
if (Math.abs(moveX) < Math.abs(moveY)) return
|
||||
|
||||
// 限制右滑的距离，不允许内容部分往右偏移，右滑会导致X轴偏移值大于0，以此做判断
|
||||
// 此处不能直接return，因为滑动过程中会缺失某些关键点坐标，会导致错乱，最好的办法就是
|
||||
// 在超出后，设置为0
|
||||
if (state.status === 'open') {
|
||||
// 在开启状态下，向左滑动，需忽略
|
||||
if (moveX < 0) moveX = 0
|
||||
// 想要收起菜单，最大能移动的距离为按钮的总宽度
|
||||
if (moveX > buttonsWidth) moveX = buttonsWidth
|
||||
// 如果是已经打开了的状态，向左滑动时，移动收起菜单
|
||||
moveSwipeAction(-buttonsWidth + moveX, instance, ownerInstance)
|
||||
} else {
|
||||
// 关闭状态下，右滑动需忽略
|
||||
if (moveX > 0) moveX = 0
|
||||
// 滑动的距离不允许超过所有按钮的总宽度，此时只能是左滑，最终设置按钮的总宽度，同时为负数
|
||||
if (Math.abs(moveX) > buttonsWidth) moveX = -buttonsWidth
|
||||
// 只要是在滑过程中，就不断移动单元格内容部分，从而使隐藏的菜单显示出来
|
||||
moveSwipeAction(moveX, instance, ownerInstance)
|
||||
}
|
||||
}
|
||||
|
||||
// 触摸结束
|
||||
function touchend(event, ownerInstance) {
|
||||
// 触发事件的组件的ComponentDescriptor实例
|
||||
var instance = event.instance
|
||||
// wxs内的局部变量快照
|
||||
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) return
|
||||
// 在开启状态下，点击一下内容区域，moveX为0，也即没有进行移动，这时执行收起菜单逻辑
|
||||
if (moveX === 0) {
|
||||
return closeSwipeAction(instance, ownerInstance)
|
||||
}
|
||||
// 在开启状态下，滑动距离小于阈值，则默认为不关闭，同时恢复原来的打开状态
|
||||
if (Math.abs(moveX) < state.threshold) {
|
||||
openSwipeAction(instance, ownerInstance)
|
||||
} else {
|
||||
// 如果滑动距离大于阈值，则执行收起逻辑
|
||||
closeSwipeAction(instance, ownerInstance)
|
||||
}
|
||||
} else {
|
||||
// 在关闭的状态下，右滑，无需操作
|
||||
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 getMoveDirection(instance, ownerInstance) {
|
||||
var state = instance.getState()
|
||||
}
|
||||
|
||||
// 移动滑动选择器内容区域，同时显示出其隐藏的菜单
|
||||
function moveSwipeAction(moveX, instance, ownerInstance) {
|
||||
var state = instance.getState()
|
||||
// 获取所有按钮的实例，需要通过它去设置按钮的位移
|
||||
var buttons = ownerInstance.selectAllComponents('.u-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('.u-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)
|
||||
}
|
||||
|
||||
// 标记菜单的当前状态，open-已经打开，close-已经关闭
|
||||
function setStatus(status, instance, ownerInstance) {
|
||||
var state = instance.getState()
|
||||
state.status = status
|
||||
ownerInstance.callMethod('setState', status)
|
||||
}
|
||||
|
||||
// 一次性收起滑动菜单
|
||||
function closeSwipeAction(instance, ownerInstance) {
|
||||
var state = instance.getState()
|
||||
// 获取所有按钮的实例，需要通过它去设置按钮的位移
|
||||
var buttons = ownerInstance.selectAllComponents('.u-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)
|
||||
}
|
||||
|
||||
// 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
|
||||
}
|
||||
@ -0,0 +1,270 @@
|
||||
// nvue操作dom的库，用于获取dom的尺寸信息
|
||||
const dom = uni.requireNativePlugin('dom')
|
||||
// nvue中用于操作元素动画的库，类似于uni.animation，只不过uni.animation不能用于nvue
|
||||
const animation = uni.requireNativePlugin('animation')
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 是否滑动中
|
||||
moving: false,
|
||||
// 状态，open-打开状态，close-关闭状态
|
||||
status: 'close',
|
||||
// 开始触摸点的X和Y轴坐标
|
||||
startX: 0,
|
||||
startY: 0,
|
||||
// 所有隐藏按钮的尺寸信息数组
|
||||
buttons: [],
|
||||
// 所有按钮的总宽度
|
||||
buttonsWidth: 0,
|
||||
// 记录上一次移动的位置值
|
||||
moveX: 0,
|
||||
// 记录上一次滑动的位置，用于前后两次做对比，如果移动的距离小于某一阈值，则认为前后之间没有移动，为了解决可能存在的通信阻塞问题
|
||||
lastX: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 获取过渡时间
|
||||
getDuratin() {
|
||||
let duration = String(this.duration)
|
||||
// 如果ms为单位，返回ms的数值部分
|
||||
if (duration.indexOf('ms') >= 0) return parseInt(duration)
|
||||
// 如果s为单位，为了得到ms的数值，需要乘以1000
|
||||
if (duration.indexOf('s') >= 0) return parseInt(duration) * 1000
|
||||
// 如果值传了数值，且小于30，认为是s单位
|
||||
duration = Number(duration)
|
||||
return duration < 30 ? duration * 1000 : duration
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
// if(n === true) {
|
||||
// uni.$u.sleep(50).then(() => {
|
||||
// this.openSwipeAction()
|
||||
// })
|
||||
// } else {
|
||||
// this.closeSwipeAction()
|
||||
// }
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
uni.$u.sleep(20).then(() => {
|
||||
this.queryRect()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.closeSwipeAction()
|
||||
},
|
||||
// 触摸单元格
|
||||
touchstart(event) {
|
||||
if (this.disabled) return
|
||||
this.closeOther()
|
||||
const { touches } = event
|
||||
// 记录触摸开始点的坐标值
|
||||
this.startX = touches[0].pageX
|
||||
this.startY = touches[0].pageY
|
||||
},
|
||||
// // 触摸滑动
|
||||
touchmove(event) {
|
||||
if (this.disabled) return
|
||||
const { touches } = event
|
||||
const { pageX } = touches[0]
|
||||
const { pageY } = touches[0]
|
||||
let moveX = pageX - this.startX
|
||||
const moveY = pageY - this.startY
|
||||
const { buttonsWidth } = this
|
||||
const len = this.buttons.length
|
||||
|
||||
// 判断前后两次的移动距离，如果小于一定值，则不进行移动处理
|
||||
if (Math.abs(pageX - this.lastX) < 0.3) return
|
||||
this.lastX = pageX
|
||||
|
||||
// 移动的X轴距离大于Y轴距离，也即终点与起点位置连线，与X轴夹角小于45度时，禁止页面滚动
|
||||
if (Math.abs(moveX) > Math.abs(moveY) || Math.abs(moveX) > this.threshold) {
|
||||
event.stopPropagation()
|
||||
}
|
||||
// 如果移动的X轴距离小于Y轴距离，也即终点位置与起点位置连线，与Y轴夹角小于45度时，认为是页面上下滑动，而不是左右滑动单元格
|
||||
if (Math.abs(moveX) < Math.abs(moveY)) return
|
||||
|
||||
// 限制右滑的距离，不允许内容部分往右偏移，右滑会导致X轴偏移值大于0，以此做判断
|
||||
// 此处不能直接return，因为滑动过程中会缺失某些关键点坐标，会导致错乱，最好的办法就是
|
||||
// 在超出后，设置为0
|
||||
if (this.status === 'open') {
|
||||
// 在开启状态下，向左滑动，需忽略
|
||||
if (moveX < 0) moveX = 0
|
||||
// 想要收起菜单，最大能移动的距离为按钮的总宽度
|
||||
if (moveX > buttonsWidth) moveX = buttonsWidth
|
||||
// 如果是已经打开了的状态，向左滑动时，移动收起菜单
|
||||
this.moveSwipeAction(-buttonsWidth + moveX)
|
||||
} else {
|
||||
// 关闭状态下，右滑动需忽略
|
||||
if (moveX > 0) moveX = 0
|
||||
// 滑动的距离不允许超过所有按钮的总宽度，此时只能是左滑，最终设置按钮的总宽度，同时为负数
|
||||
if (Math.abs(moveX) > buttonsWidth) moveX = -buttonsWidth
|
||||
// 只要是在滑过程中，就不断移动菜单的内容部分，从而使隐藏的菜单显示出来
|
||||
this.moveSwipeAction(moveX)
|
||||
}
|
||||
},
|
||||
// 单元格结束触摸
|
||||
touchend(event) {
|
||||
if (this.disabled) return
|
||||
const touches = event.changedTouches ? event.changedTouches[0] : {}
|
||||
const { pageX } = touches
|
||||
const { pageY } = touches
|
||||
const { buttonsWidth } = this
|
||||
this.moveX = pageX - this.startX
|
||||
if (this.status === 'open') {
|
||||
// 在展开的状态下，继续左滑，无需操作
|
||||
if (this.moveX < 0) this.moveX = 0
|
||||
if (this.moveX > buttonsWidth) this.moveX = buttonsWidth
|
||||
// 在开启状态下，点击一下内容区域，moveX为0，也即没有进行移动，这时执行收起菜单逻辑
|
||||
if (this.moveX === 0) {
|
||||
return this.closeSwipeAction()
|
||||
}
|
||||
// 在开启状态下，滑动距离小于阈值，则默认为不关闭，同时恢复原来的打开状态
|
||||
if (Math.abs(this.moveX) < this.threshold) {
|
||||
this.openSwipeAction()
|
||||
} else {
|
||||
// 如果滑动距离大于阈值，则执行收起逻辑
|
||||
this.closeSwipeAction()
|
||||
}
|
||||
} else {
|
||||
// 在关闭的状态下，右滑，无需操作
|
||||
if (this.moveX >= 0) this.moveX = 0
|
||||
if (this.moveX <= -buttonsWidth) this.moveX = -buttonsWidth
|
||||
// 理由同上
|
||||
if (Math.abs(this.moveX) < this.threshold) {
|
||||
this.closeSwipeAction()
|
||||
} else {
|
||||
this.openSwipeAction()
|
||||
}
|
||||
}
|
||||
},
|
||||
// 移动滑动选择器内容区域，同时显示出其隐藏的菜单
|
||||
moveSwipeAction(moveX) {
|
||||
if (this.moving) return
|
||||
this.moving = true
|
||||
|
||||
let previewButtonsMoveX = 0
|
||||
const len = this.buttons.length
|
||||
animation.transition(this.$refs['u-swipe-action-item__content'].ref, {
|
||||
styles: {
|
||||
transform: `translateX(${moveX}px)`
|
||||
},
|
||||
timingFunction: 'linear'
|
||||
}, () => {
|
||||
this.moving = false
|
||||
})
|
||||
// 按钮的组的长度
|
||||
for (let i = len - 1; i >= 0; i--) {
|
||||
const buttonRef = this.$refs[`u-swipe-action-item__right__button-${i}`][0].ref
|
||||
// 通过比例，得出元素自身该移动的距离
|
||||
const translateX = this.buttons[i].width / this.buttonsWidth * moveX
|
||||
// 最终移动的距离，是通过自身比例算出的距离，再加上在它之前所有按钮移动的距离之和
|
||||
const realTranslateX = translateX + previewButtonsMoveX
|
||||
animation.transition(buttonRef, {
|
||||
styles: {
|
||||
transform: `translateX(${realTranslateX}px)`
|
||||
},
|
||||
duration: 0,
|
||||
delay: 0,
|
||||
timingFunction: 'linear'
|
||||
}, () => {})
|
||||
// 记录本按钮之前的所有按钮的移动距离之和
|
||||
previewButtonsMoveX += translateX
|
||||
}
|
||||
},
|
||||
// 关闭菜单
|
||||
closeSwipeAction() {
|
||||
if (this.status === 'close') return
|
||||
this.moving = true
|
||||
const { buttonsWidth } = this
|
||||
animation.transition(this.$refs['u-swipe-action-item__content'].ref, {
|
||||
styles: {
|
||||
transform: 'translateX(0px)'
|
||||
},
|
||||
duration: this.getDuratin,
|
||||
timingFunction: 'ease-in-out'
|
||||
}, () => {
|
||||
this.status = 'close'
|
||||
this.moving = false
|
||||
this.closeHandler()
|
||||
})
|
||||
// 按钮的组的长度
|
||||
const len = this.buttons.length
|
||||
for (let i = len - 1; i >= 0; i--) {
|
||||
const buttonRef = this.$refs[`u-swipe-action-item__right__button-${i}`][0].ref
|
||||
// 如果不满足边界条件，返回
|
||||
if (this.buttons.length === 0 || !this.buttons[i] || !this.buttons[i].width) return
|
||||
|
||||
animation.transition(buttonRef, {
|
||||
styles: {
|
||||
transform: 'translateX(0px)'
|
||||
},
|
||||
duration: this.getDuratin,
|
||||
timingFunction: 'ease-in-out'
|
||||
}, () => {})
|
||||
}
|
||||
},
|
||||
// 打开菜单
|
||||
openSwipeAction() {
|
||||
if (this.status === 'open') return
|
||||
this.moving = true
|
||||
const buttonsWidth = -this.buttonsWidth
|
||||
let previewButtonsMoveX = 0
|
||||
animation.transition(this.$refs['u-swipe-action-item__content'].ref, {
|
||||
styles: {
|
||||
transform: `translateX(${buttonsWidth}px)`
|
||||
},
|
||||
duration: this.getDuratin,
|
||||
timingFunction: 'ease-in-out'
|
||||
}, () => {
|
||||
this.status = 'open'
|
||||
this.moving = false
|
||||
this.openHandler()
|
||||
})
|
||||
// 按钮的组的长度
|
||||
const len = this.buttons.length
|
||||
for (let i = len - 1; i >= 0; i--) {
|
||||
const buttonRef = this.$refs[`u-swipe-action-item__right__button-${i}`][0].ref
|
||||
// 如果不满足边界条件，返回
|
||||
if (this.buttons.length === 0 || !this.buttons[i] || !this.buttons[i].width) return
|
||||
// 通过比例，得出元素自身该移动的距离
|
||||
const translateX = this.buttons[i].width / this.buttonsWidth * buttonsWidth
|
||||
// 最终移动的距离，是通过自身比例算出的距离，再加上在它之前所有按钮移动的距离之和
|
||||
const realTranslateX = translateX + previewButtonsMoveX
|
||||
animation.transition(buttonRef, {
|
||||
styles: {
|
||||
transform: `translateX(${realTranslateX}px)`
|
||||
},
|
||||
duration: this.getDuratin,
|
||||
timingFunction: 'ease-in-out'
|
||||
}, () => {})
|
||||
previewButtonsMoveX += translateX
|
||||
}
|
||||
},
|
||||
// 查询按钮节点信息
|
||||
queryRect() {
|
||||
// 历遍所有按钮数组，通过getRectByDom返回一个promise
|
||||
const promiseAll = this.rightOptions.map((item, index) => this.getRectByDom(this.$refs[`u-swipe-action-item__right__button-${index}`][0]))
|
||||
// 通过promise.all方法，让所有按钮的查询结果返回一个数组的形式
|
||||
Promise.all(promiseAll).then((sizes) => {
|
||||
this.buttons = sizes
|
||||
// 计算所有按钮总宽度
|
||||
this.buttonsWidth = sizes.reduce((sum, cur) => sum + cur.width, 0)
|
||||
})
|
||||
},
|
||||
// 通过nvue的dom模块，查询节点信息
|
||||
getRectByDom(ref) {
|
||||
return new Promise((resolve) => {
|
||||
dom.getComponentRect(ref, (res) => {
|
||||
resolve(res.size)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,173 @@
|
||||
// nvue操作dom的库，用于获取dom的尺寸信息
|
||||
const dom = uni.requireNativePlugin('dom');
|
||||
const bindingX = uni.requireNativePlugin('bindingx');
|
||||
const animation = uni.requireNativePlugin('animation');
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 所有按钮的总宽度
|
||||
buttonsWidth: 0,
|
||||
// 是否正在移动中
|
||||
moving: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 获取过渡时间
|
||||
getDuratin() {
|
||||
let duration = String(this.duration)
|
||||
// 如果ms为单位，返回ms的数值部分
|
||||
if (duration.indexOf('ms') >= 0) return parseInt(duration)
|
||||
// 如果s为单位，为了得到ms的数值，需要乘以1000
|
||||
if (duration.indexOf('s') >= 0) return parseInt(duration) * 1000
|
||||
// 如果值传了数值，且小于30，认为是s单位
|
||||
duration = Number(duration)
|
||||
return duration < 30 ? duration * 1000 : duration
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show(n) {
|
||||
if(n) {
|
||||
this.moveCellByAnimation('open')
|
||||
} else {
|
||||
this.moveCellByAnimation('close')
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initialize()
|
||||
},
|
||||
methods: {
|
||||
initialize() {
|
||||
this.queryRect()
|
||||
},
|
||||
// 关闭单元格，用于打开一个，自动关闭其他单元格的场景
|
||||
closeHandler() {
|
||||
if(this.status === 'open') {
|
||||
// 如果在打开状态下，进行点击的话，直接关闭单元格
|
||||
return this.moveCellByAnimation('close') && this.unbindBindingX()
|
||||
}
|
||||
},
|
||||
// 点击单元格
|
||||
clickHandler() {
|
||||
// 如果在移动中被点击，进行忽略
|
||||
if(this.moving) return
|
||||
// 尝试关闭其他打开的单元格
|
||||
this.parent && this.parent.closeOther(this)
|
||||
if(this.status === 'open') {
|
||||
// 如果在打开状态下，进行点击的话，直接关闭单元格
|
||||
return this.moveCellByAnimation('close') && this.unbindBindingX()
|
||||
}
|
||||
},
|
||||
// 滑动单元格
|
||||
onTouchstart(e) {
|
||||
// 如果当前正在移动中，或者disabled状态，则返回
|
||||
if(this.moving || this.disabled) {
|
||||
return this.unbindBindingX()
|
||||
}
|
||||
if(this.status === 'open') {
|
||||
// 如果在打开状态下，进行点击的话，直接关闭单元格
|
||||
return this.moveCellByAnimation('close') && this.unbindBindingX()
|
||||
}
|
||||
e.stopPropagation && e.stopPropagation()
|
||||
e.preventDefault && e.preventDefault()
|
||||
this.moving = true
|
||||
// 获取元素ref
|
||||
const content = this.getContentRef()
|
||||
let expression = `min(max(${-this.buttonsWidth}, x), 0)`
|
||||
// 尝试关闭其他打开的单元格
|
||||
this.parent && this.parent.closeOther(this)
|
||||
|
||||
// 阿里为了KPI而开源的BindingX
|
||||
this.panEvent = bindingX.bind({
|
||||
anchor: content,
|
||||
eventType: 'pan',
|
||||
props: [{
|
||||
element: content,
|
||||
// 绑定width属性，设置其宽度值
|
||||
property: 'transform.translateX',
|
||||
expression
|
||||
}]
|
||||
}, (res) => {
|
||||
this.moving = false
|
||||
if (res.state === 'end' || res.state === 'exit') {
|
||||
const deltaX = res.deltaX
|
||||
if(deltaX <= -this.buttonsWidth || deltaX >= 0) {
|
||||
// 如果触摸滑动的过程中，大于单元格的总宽度，或者大于0，意味着已经动过滑动达到了打开或者关闭的状态
|
||||
// 这里直接进行状态的标记
|
||||
this.$nextTick(() => {
|
||||
this.status = deltaX <= -this.buttonsWidth ? 'open' : 'close'
|
||||
})
|
||||
} else if(Math.abs(deltaX) > uni.$u.getPx(this.threshold)) {
|
||||
// 在移动大于阈值、并且小于总按钮宽度时，进行自动打开或者关闭
|
||||
// 移动距离大于0时，意味着需要关闭状态
|
||||
if(Math.abs(deltaX) < this.buttonsWidth) {
|
||||
this.moveCellByAnimation(deltaX > 0 ? 'close' : 'open')
|
||||
}
|
||||
} else {
|
||||
// 在小于阈值时，进行关闭操作(如果在打开状态下，将不会执行bindingX)
|
||||
this.moveCellByAnimation('close')
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 释放bindingX
|
||||
unbindBindingX() {
|
||||
// 释放上一次的资源
|
||||
if (this?.panEvent?.token != 0) {
|
||||
bindingX.unbind({
|
||||
token: this.panEvent?.token,
|
||||
// pan为手势事件
|
||||
eventType: 'pan'
|
||||
})
|
||||
}
|
||||
},
|
||||
// 查询按钮节点信息
|
||||
queryRect() {
|
||||
// 历遍所有按钮数组，通过getRectByDom返回一个promise
|
||||
const promiseAll = this.options.map((item, index) => {
|
||||
return this.getRectByDom(this.$refs[`u-swipe-action-item__right__button-${index}`][0])
|
||||
})
|
||||
// 通过promise.all方法，让所有按钮的查询结果返回一个数组的形式
|
||||
Promise.all(promiseAll).then(sizes => {
|
||||
this.buttons = sizes
|
||||
// 计算所有按钮总宽度
|
||||
this.buttonsWidth = sizes.reduce((sum, cur) => sum + cur.width, 0)
|
||||
})
|
||||
},
|
||||
// 通过nvue的dom模块，查询节点信息
|
||||
getRectByDom(ref) {
|
||||
return new Promise(resolve => {
|
||||
dom.getComponentRect(ref, res => {
|
||||
resolve(res.size)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 移动单元格到左边或者右边尽头
|
||||
moveCellByAnimation(status = 'open') {
|
||||
if(this.moving) return
|
||||
// 标识当前状态
|
||||
this.moveing = true
|
||||
const content = this.getContentRef()
|
||||
const x = status === 'open' ? -this.buttonsWidth : 0
|
||||
animation.transition(content, {
|
||||
styles: {
|
||||
transform: `translateX(${x}px)`,
|
||||
},
|
||||
duration: uni.$u.getDuration(this.duration, false),
|
||||
timingFunction: 'ease-in-out'
|
||||
}, () => {
|
||||
this.moving = false
|
||||
this.status = status
|
||||
this.unbindBindingX()
|
||||
})
|
||||
},
|
||||
// 获取元素ref
|
||||
getContentRef() {
|
||||
return this.$refs['u-swipe-action-item__content'].ref
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.unbindBindingX()
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
export default {
|
||||
props: {
|
||||
// 控制打开或者关闭
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.swipeActionItem.show
|
||||
},
|
||||
// 标识符，如果是v-for，可用index索引值
|
||||
name: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.swipeActionItem.name
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.swipeActionItem.disabled
|
||||
},
|
||||
// 是否自动关闭其他swipe按钮组
|
||||
autoClose: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.swipeActionItem.autoClose
|
||||
},
|
||||
// 滑动距离阈值，只有大于此值，才被认为是要打开菜单
|
||||
threshold: {
|
||||
type: Number,
|
||||
default: uni.$u.props.swipeActionItem.threshold
|
||||
},
|
||||
// 右侧按钮内容
|
||||
options: {
|
||||
type: Array,
|
||||
default() {
|
||||
return uni.$u.props.swipeActionItem.rightOptions
|
||||
}
|
||||
},
|
||||
// 动画过渡时间，单位ms
|
||||
duration: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.swipeActionItem.duration
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<view class="u-swipe-action-item" ref="u-swipe-action-item">
|
||||
<view class="u-swipe-action-item__right">
|
||||
<slot name="button">
|
||||
<view v-for="(item,index) in options" :key="index" class="u-swipe-action-item__right__button"
|
||||
:ref="`u-swipe-action-item__right__button-${index}`" :style="[{
|
||||
alignItems: item.style && item.style.borderRadius ? 'center' : 'stretch'
|
||||
}]" @tap="buttonClickHandler(item, index)">
|
||||
<view class="u-swipe-action-item__right__button__wrapper" :style="[{
|
||||
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
|
||||
borderRadius: item.style && item.style.borderRadius ? item.style.borderRadius : '0',
|
||||
padding: item.style && item.style.borderRadius ? '0' : '0 15px',
|
||||
}, item.style]">
|
||||
<u-icon v-if="item.icon" :name="item.icon"
|
||||
:color="item.style && item.style.color ? item.style.color : '#ffffff'"
|
||||
:size="item.iconSize ? $u.addUnit(item.iconSize) : item.style && item.style.fontSize ? $u.getPx(item.style.fontSize) * 1.2 : 17"
|
||||
:customStyle="{
|
||||
marginRight: item.text ? '2px' : 0
|
||||
}"></u-icon>
|
||||
<text v-if="item.text" class="u-swipe-action-item__right__button__wrapper__text u-line-1"
|
||||
:style="[{
|
||||
color: item.style && item.style.color ? item.style.color : '#ffffff',
|
||||
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px',
|
||||
lineHeight: item.style && item.style.fontSize ? item.style.fontSize : '16px',
|
||||
}]">{{ item.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
<!-- #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ -->
|
||||
<view class="u-swipe-action-item__content" @touchstart="wxs.touchstart" @touchmove="wxs.touchmove"
|
||||
@touchend="wxs.touchend" :status="status" :change:status="wxs.statusChange" :size="size"
|
||||
:change:size="wxs.sizeChange">
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<view class="u-swipe-action-item__content" ref="u-swipe-action-item__content" @panstart="onTouchstart"
|
||||
@tap="clickHandler">
|
||||
<!-- #endif -->
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ -->
|
||||
<script src="./index.wxs" module="wxs" lang="wxs"></script>
|
||||
<!-- #endif -->
|
||||
<script>
|
||||
import touch from '../../libs/mixin/touch.js'
|
||||
import props from './props.js';
|
||||
// #ifdef APP-NVUE
|
||||
import nvue from './nvue.js';
|
||||
// #endif
|
||||
// #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ
|
||||
import wxs from './wxs.js';
|
||||
// #endif
|
||||
/**
|
||||
* SwipeActionItem 滑动单元格子组件
|
||||
* @description 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作
|
||||
* @tutorial https://www.uviewui.com/components/swipeAction.html
|
||||
* @property {Boolean} show 控制打开或者关闭（默认 false ）
|
||||
* @property {String | Number} index 标识符，如果是v-for，可用index索引
|
||||
* @property {Boolean} disabled 是否禁用（默认 false ）
|
||||
* @property {Boolean} autoClose 是否自动关闭其他swipe按钮组（默认 true ）
|
||||
* @property {Number} threshold 滑动距离阈值，只有大于此值，才被认为是要打开菜单（默认 30 ）
|
||||
* @property {Array} options 右侧按钮内容
|
||||
* @property {String | Number} duration 动画过渡时间，单位ms（默认 350 ）
|
||||
* @event {Function(index)} open 组件打开时触发
|
||||
* @event {Function(index)} close 组件关闭时触发
|
||||
* @example <u-swipe-action><u-swipe-action-item :options="options1" ></u-swipe-action-item></u-swipe-action>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-swipe-action-item',
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin, props, touch],
|
||||
// #ifdef APP-NVUE
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin, props, nvue, touch],
|
||||
// #endif
|
||||
// #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin, props, touch, wxs],
|
||||
// #endif
|
||||
data() {
|
||||
return {
|
||||
// 按钮的尺寸信息
|
||||
size: {},
|
||||
// 父组件u-swipe-action的参数
|
||||
parentData: {
|
||||
autoClose: true,
|
||||
},
|
||||
// 当前状态，open-打开，close-关闭
|
||||
status: 'close',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 由于wxs无法直接读取外部的值，需要在外部值变化时，重新执行赋值逻辑
|
||||
wxsInit(newValue, oldValue) {
|
||||
this.queryRect()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
wxsInit() {
|
||||
return [this.disabled, this.autoClose, this.threshold, this.options, this.duration]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
// 初始化父组件数据
|
||||
this.updateParentData()
|
||||
// #ifndef APP-NVUE
|
||||
uni.$u.sleep().then(() => {
|
||||
this.queryRect()
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
updateParentData() {
|
||||
// 此方法在mixin中
|
||||
this.getParentData('u-swipe-action')
|
||||
},
|
||||
// #ifndef APP-NVUE
|
||||
// 查询节点
|
||||
queryRect() {
|
||||
this.$uGetRect('.u-swipe-action-item__right__button', true).then(buttons => {
|
||||
this.size = {
|
||||
buttons,
|
||||
show: this.show,
|
||||
disabled: this.disabled,
|
||||
threshold: this.threshold,
|
||||
duration: this.duration
|
||||
}
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
// 按钮被点击
|
||||
buttonClickHandler(item, index) {
|
||||
this.$emit('click', {
|
||||
index,
|
||||
name: this.name
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../libs/css/components.scss";
|
||||
|
||||
.u-swipe-action-item {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* #ifndef APP-NVUE */
|
||||
touch-action: none;
|
||||
/* #endif */
|
||||
|
||||
&__content {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
&__right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
@include flex;
|
||||
|
||||
&__button {
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
|
||||
&__wrapper {
|
||||
@include flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 15px;
|
||||
|
||||
&__text {
|
||||
@include flex;
|
||||
align-items: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,15 @@
|
||||
export default {
|
||||
methods: {
|
||||
// 关闭时执行
|
||||
closeHandler() {
|
||||
this.status = 'close'
|
||||
},
|
||||
setState(status) {
|
||||
this.status = status
|
||||
},
|
||||
closeOther() {
|
||||
// 尝试关闭其他打开的单元格
|
||||
this.parent && this.parent.closeOther(this)
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user