bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/uni_modules/uview-ui/components/u-swipe-action-item/nvue.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,174 @@
// 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可能不为一个对象
         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()
      }
   }
}