gx

queenwuli

2021-01-25 c4246ca910f28014efaace64ebf92f47a673a9cf

 hive-app/components/uni-swipe-action-item/mpother.js

New file
@@ -0,0 +1,252 @@
const MIN_DISTANCE = 10;
export default {
   data() {
      return {
         uniShow: false,
         left: 0,
         buttonShow: 'none',
         ani: false,
         moveLeft:''
      }
   },
   watch: {
      show(newVal) {
         if (this.autoClose) return
         this.openState(newVal)
      },
      left(){
         this.moveLeft = `translateX(${this.left}px)`
      },
      buttonShow(newVal){
         if (this.autoClose) return
         this.openState(newVal)
      },
      leftOptions() {
         this.init()
      },
      rightOptions() {
         this.init()
      }
   },
   mounted() {
      // this.position = {}
      if (this.swipeaction.children !== undefined) {
         this.swipeaction.children.push(this)
      }
      this.init()
   },
   beforeDestoy() {
      this.swipeaction.children.forEach((item, index) => {
         if (item === this) {
            this.swipeaction.children.splice(index, 1)
         }
      })
   },
   methods: {
      init(){
         clearTimeout(this.timer)
         this.timer = setTimeout(() => {
            this.getSelectorQuery()
         }, 100)
         // 移动距离
         this.left = 0
         this.x = 0
      },
      closeSwipe(e) {
         if (!this.autoClose) return
         this.swipeaction.closeOther(this)
      },
      appTouchStart(e) {
         const {
            clientX
         } = e.changedTouches[0]
         this.clientX = clientX
         this.timestamp = new Date().getTime()
      },
      appTouchEnd(e, index, item, position) {
         const {
            clientX
         } = e.changedTouches[0]
         // fixed by xxxx 模拟点击事件，解决 ios 13 点击区域错位的问题
         let diff = Math.abs(this.clientX - clientX)
         let time = (new Date().getTime()) - this.timestamp
         if (diff < 40 && time < 300) {
            this.$emit('click', {
               content: item,
               index,
               position
            })
         }
      },
      touchstart(e) {
         if (this.disabled) return
         this.ani = false
         this.x = this.left || 0
         this.stopTouchStart(e)
         this.autoClose && this.closeSwipe()
      },
      touchmove(e) {
         if (this.disabled) return
         // 是否可以滑动页面
         this.stopTouchMove(e);
         if (this.direction !== 'horizontal') {
            return;
         }

         this.move(this.x + this.deltaX)
      },
      touchend() {
         if (this.disabled) return
         this.moveDirection(this.left)
      },
      /**
       * 设置移动距离
       * @param {Object} value
       */
      move(value) {
         value = value || 0
         const leftWidth = this.leftWidth
         const rightWidth = this.rightWidth
         // 获取可滑动范围
         this.left = this.range(value, -rightWidth, leftWidth);
      },

      /**
       * 获取范围
       * @param {Object} num
       * @param {Object} min
       * @param {Object} max
       */
      range(num, min, max) {
         return Math.min(Math.max(num, min), max);
      },
      /**
       * 移动方向判断
       * @param {Object} left
       * @param {Object} value
       */
      moveDirection(left) {
         const threshold = this.threshold
         const isopen = this.isopen || 'none'
         const leftWidth = this.leftWidth
         const rightWidth = this.rightWidth
         if (this.deltaX === 0) {
            this.openState('none')
            return
         }
         if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth > 0 && rightWidth +
               left < threshold)) {
            // right
            this.openState('right')
         } else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth > 0 &&
               leftWidth - left < threshold)) {
            // left
            this.openState('left')
         } else {
            // default
            this.openState('none')
         }
      },

      /**
       * 开启状态
       * @param {Boolean} type
       */
      openState(type) {
         const leftWidth = this.leftWidth
         const rightWidth = this.rightWidth
         let left = ''
         this.isopen = this.isopen ? this.isopen : 'none'
         switch (type) {
            case "left":
               left = leftWidth
               break
            case "right":
               left = -rightWidth
               break
            default:
               left = 0
         }


         if (this.isopen !== type) {
            this.throttle = true
            this.$emit('change', type)
         }

         this.isopen = type
         // 添加动画类
         this.ani = true
         this.$nextTick(() => {
            this.move(left)
         })
         // 设置最终移动位置,理论上只要进入到这个函数，肯定是要打开的
      },
      close() {
         this.openState('none')
      },
      getDirection(x, y) {
         if (x > y && x > MIN_DISTANCE) {
            return 'horizontal';
         }
         if (y > x && y > MIN_DISTANCE) {
            return 'vertical';
         }
         return '';
      },

      /**
       * 重置滑动状态
       * @param {Object} event
       */
      resetTouchStatus() {
         this.direction = '';
         this.deltaX = 0;
         this.deltaY = 0;
         this.offsetX = 0;
         this.offsetY = 0;
      },

      /**
       * 设置滑动开始位置
       * @param {Object} event
       */
      stopTouchStart(event) {
         this.resetTouchStatus();
         const touch = event.touches[0];
         this.startX = touch.clientX;
         this.startY = touch.clientY;
      },

      /**
       * 滑动中，是否禁止打开
       * @param {Object} event
       */
      stopTouchMove(event) {
         const touch = event.touches[0];
         this.deltaX = touch.clientX - this.startX;
         this.deltaY = touch.clientY - this.startY;
         this.offsetX = Math.abs(this.deltaX);
         this.offsetY = Math.abs(this.deltaY);
         this.direction = this.direction || this.getDirection(this.offsetX, this.offsetY);
      },

      getSelectorQuery() {
         const views = uni.createSelectorQuery().in(this)
         views
            .selectAll('.uni-swipe_button-group')
            .boundingClientRect(data => {
               let show = 'none'
               if (this.autoClose) {
                  show = 'none'
               } else {
                  show = this.show
               }
               this.leftWidth = data[0].width || 0
               this.rightWidth = data[1].width || 0
               this.buttonShow = show
            })
            .exec()
      }
   }
}