bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/uni_modules/uview-ui/components/u-swipe-action-item/index - backup.wxs

¶Ô±ÈÐÂÎļþ
@@ -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
}