项目初始化

gaoluyang

3 天以前 92230c9a97dc9ce9df3313d11d26999c04bb6b26

 src/uni_modules/uni-swipe-action/components/uni-swipe-action-item/render.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,270 @@
const MIN_DISTANCE = 10;
export default {
   showWatch(newVal, oldVal, ownerInstance, instance, self) {
      var state = self.state
      var $el = ownerInstance.$el || ownerInstance.$vm && ownerInstance.$vm.$el
      if (!$el) return
      this.getDom(instance, ownerInstance, self)
      if (newVal && newVal !== 'none') {
         this.openState(newVal, instance, ownerInstance, self)
         return
      }

      if (state.left) {
         this.openState('none', instance, ownerInstance, self)
      }
      this.resetTouchStatus(instance, self)
   },

   /**
    * å¼€å§‹è§¦æ‘¸æ“ä½œ
    * @param {Object} e
    * @param {Object} ins
    */
   touchstart(e, ownerInstance, self) {
      let instance = e.instance;
      let disabled = instance.getDataset().disabled
      let state = self.state;
      this.getDom(instance, ownerInstance, self)
      // fix by mehaotian, TODO å…¼å®¹ app-vue èŽ·å–dataset为字符串 , h5 èŽ·å– ä¸º undefined çš„问题,待框架修复
      disabled = this.getDisabledType(disabled)
      if (disabled) return
      // å¼€å§‹è§¦æ‘¸æ—¶ç§»é™¤åŠ¨ç”»ç±»
      instance.requestAnimationFrame(function() {
         instance.removeClass('ani');
         ownerInstance.callMethod('closeSwipe');
      })

      // è®°å½•ä¸Šæ¬¡çš„位置
      state.x = state.left || 0
      // è®¡ç®—滑动开始位置
      this.stopTouchStart(e, ownerInstance, self)
   },

   /**
    * å¼€å§‹æ»‘动操作
    * @param {Object} e
    * @param {Object} ownerInstance
    */
   touchmove(e, ownerInstance, self) {
      let instance = e.instance;
      // åˆ é™¤ä¹‹åŽå·²ç»é‚£ä¸åˆ°å®žä¾‹äº†
      if (!instance) return;
      let disabled = instance.getDataset().disabled
      let state = self.state
      // fix by mehaotian, TODO å…¼å®¹ app-vue èŽ·å–dataset为字符串 , h5 èŽ·å– ä¸º undefined çš„问题,待框架修复
      disabled = this.getDisabledType(disabled)
      if (disabled) return
      // æ˜¯å¦å¯ä»¥æ»‘动页面
      this.stopTouchMove(e, self);
      if (state.direction !== 'horizontal') {
         return;
      }
      if (e.preventDefault) {
         // é˜»æ­¢é¡µé¢æ»šåŠ¨
         e.preventDefault()
      }
      let x = state.x + state.deltaX
      this.move(x, instance, ownerInstance, self)
   },

   /**
    * ç»“束触摸操作
    * @param {Object} e
    * @param {Object} ownerInstance
    */
   touchend(e, ownerInstance, self) {
      let instance = e.instance;
      let disabled = instance.getDataset().disabled
      let state = self.state
      // fix by mehaotian, TODO å…¼å®¹ app-vue èŽ·å–dataset为字符串 , h5 èŽ·å– ä¸º undefined çš„问题,待框架修复
      disabled = this.getDisabledType(disabled)

      if (disabled) return
      // æ»‘动过程中触摸结束,通过阙值判断是开启还是关闭
      // fixed by mehaotian å®šæ—¶å™¨è§£å†³ç‚¹å‡»æŒ‰é’®ï¼Œtouchend è§¦å‘比 click äº‹ä»¶æ—¶æœºæ—©çš„问题 ï¼Œä¸»è¦æ˜¯ ios13
      this.moveDirection(state.left, instance, ownerInstance, self)

   },

   /**
    * è®¾ç½®ç§»åŠ¨è·ç¦»
    * @param {Object} value
    * @param {Object} instance
    * @param {Object} ownerInstance
    */
   move(value, instance, ownerInstance, self) {
      value = value || 0
      let state = self.state
      let leftWidth = state.leftWidth
      let rightWidth = state.rightWidth
      // èŽ·å–可滑动范围
      state.left = this.range(value, -rightWidth, leftWidth);
      instance.requestAnimationFrame(function() {
         instance.setStyle({
            transform: 'translateX(' + state.left + 'px)',
            '-webkit-transform': 'translateX(' + state.left + 'px)'
         })
      })

   },

   /**
    * èŽ·å–元素信息
    * @param {Object} instance
    * @param {Object} ownerInstance
    */
   getDom(instance, ownerInstance, self) {
      var state = self.state
      var $el = ownerInstance.$el || ownerInstance.$vm && ownerInstance.$vm.$el
      var leftDom = $el.querySelector('.button-group--left')
      var rightDom = $el.querySelector('.button-group--right')

      state.leftWidth = leftDom.offsetWidth || 0
      state.rightWidth = rightDom.offsetWidth || 0
      state.threshold = instance.getDataset().threshold
   },

   getDisabledType(value) {
      return (typeof(value) === 'string' ? JSON.parse(value) : value) || false;
   },

   /**
    * èŽ·å–范围
    * @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
    * @param {Object} ownerInstance
    * @param {Object} ins
    */
   moveDirection(left, ins, ownerInstance, self) {
      var state = self.state
      var threshold = state.threshold
      var position = state.position
      var isopen = state.isopen || 'none'
      var leftWidth = state.leftWidth
      var rightWidth = state.rightWidth
      if (state.deltaX === 0) {
         this.openState('none', ins, ownerInstance, self)
         return
      }
      if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth > 0 &&
            rightWidth +
            left < threshold)) {
         // right
         this.openState('right', ins, ownerInstance, self)
      } else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth > 0 &&
            leftWidth - left < threshold)) {
         // left
         this.openState('left', ins, ownerInstance, self)
      } else {
         // default
         this.openState('none', ins, ownerInstance, self)
      }
   },


   /**
    * å¼€å¯çŠ¶æ€
    * @param {Boolean} type
    * @param {Object} ins
    * @param {Object} ownerInstance
    */
   openState(type, ins, ownerInstance, self) {
      let state = self.state
      let leftWidth = state.leftWidth
      let rightWidth = state.rightWidth
      let left = ''
      state.isopen = state.isopen ? state.isopen : 'none'
      switch (type) {
         case "left":
            left = leftWidth
            break
         case "right":
            left = -rightWidth
            break
         default:
            left = 0
      }

      // && !state.throttle

      if (state.isopen !== type) {
         state.throttle = true
         ownerInstance.callMethod('change', {
            open: type
         })

      }

      state.isopen = type
      // æ·»åŠ åŠ¨ç”»ç±»
      ins.requestAnimationFrame(() => {
         ins.addClass('ani');
         this.move(left, ins, ownerInstance, self)
      })
   },


   getDirection(x, y) {
      if (x > y && x > MIN_DISTANCE) {
         return 'horizontal';
      }
      if (y > x && y > MIN_DISTANCE) {
         return 'vertical';
      }
      return '';
   },

   /**
    * é‡ç½®æ»‘动状态
    * @param {Object} event
    */
   resetTouchStatus(instance, self) {
      let state = self.state;
      state.direction = '';
      state.deltaX = 0;
      state.deltaY = 0;
      state.offsetX = 0;
      state.offsetY = 0;
   },

   /**
    * è®¾ç½®æ»‘动开始位置
    * @param {Object} event
    */
   stopTouchStart(event, ownerInstance, self) {
      let instance = event.instance;
      let state = self.state
      this.resetTouchStatus(instance, self);
      var touch = event.touches[0];
      state.startX = touch.clientX;
      state.startY = touch.clientY;
   },

   /**
    * æ»‘动中，是否禁止打开
    * @param {Object} event
    */
   stopTouchMove(event, self) {
      let instance = event.instance;
      let state = self.state;
      let touch = event.touches[0];

      state.deltaX = touch.clientX - state.startX;
      state.deltaY = touch.clientY - state.startY;
      state.offsetY = Math.abs(state.deltaY);
      state.offsetX = Math.abs(state.deltaX);
      state.direction = state.direction || this.getDirection(state.offsetX, state.offsetY);
   }
}