bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/uni_modules/uview-ui/components/u-slider/nvue - ¸±±¾.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,180 @@
/**
 * ä½¿ç”¨bindingx方案实现slider
 * åªèƒ½ä½¿ç”¨äºŽnvue下
 */
// å¼•å…¥bindingx，此库类似于微信小程序wxs，目的是让js运行在视图层，减少视图层和逻辑层的通信折损
const BindingX = uni.requireNativePlugin('bindingx')
// nvue操作dom的库，用于获取dom的尺寸信息
const dom = uni.requireNativePlugin('dom')
// nvue中用于操作元素动画的库，类似于uni.animation，只不过uni.animation不能用于nvue
const animation = uni.requireNativePlugin('animation')

export default {
   data() {
      return {
         // bindingx的回调值，用于取消绑定
         panEvent: null,
         // æ ‡è®°æ˜¯å¦ç§»åŠ¨çŠ¶æ€
         moving: false,
         // ä½ç§»çš„偏移量
         x: 0,
         // æ˜¯å¦æ­£åœ¨è§¦æ‘¸è¿‡ç¨‹ä¸­ï¼Œç”¨äºŽæ ‡è®°åŠ¨ç”»ç±»æ˜¯å¦æ·»åŠ æˆ–移除
         touching: false,
         changeFromInside: false
      }
   },
   watch: {
      // ç›‘听vlaue的变化，此变化可能是由于内部修改v-model的值，或者外部
      // ä»ŽæœåŠ¡ç«¯èŽ·å–一个值后，赋值给slider的v-model而导致的
      value(n) {
         if (!this.changeFromInside) {
            this.initX()
         } else {
            this.changeFromInside = false
         }
      }
   },
   mounted() {
      this.init()
   },
   methods: {
      init() {
         this.getSliderRect()
      },
      // èŽ·å–节点信息
      // èŽ·å–slider尺寸
      getSliderRect() {
         // èŽ·å–滑块条的尺寸信息
         // é€šè¿‡nvue的dom模块，查询节点信息
         setTimeout(() => {
            dom.getComponentRect(this.$refs['slider'], res => {
               this.sliderRect = res.size
               this.initX()
            })
         }, 10)
      },
      // åˆå§‹åŒ–按钮位置
      initButtonStyle({
         barStyle,
         buttonWrapperStyle
      }) {
         this.barStyle = barStyle
         this.buttonWrapperStyle = buttonWrapperStyle
      },
      emitEvent(event, value) {
         this.$emit(event, value ? value : this.value)
      },
      formatStep(value) {
         // ç§»åŠ¨ç‚¹å æ€»é•¿åº¦çš„百分比
         return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step
      },
      // æ»‘动开始
      onTouchStart(e) {
         // é˜»æ­¢é¡µé¢æ»šåŠ¨ï¼Œå¯ä»¥ä¿è¯åœ¨æ»‘动过程中，不让页面可以上下滚动，造成不好的体验
         e.stopPropagation && e.stopPropagation()
         e.preventDefault && e.preventDefault()
         if (this.moving || this.disabled) {
            // é‡Šæ”¾ä¸Šä¸€æ¬¡çš„资源
            if (this.panEvent?.token != 0) {
               BindingX.unbind({
                  token: this.panEvent.token,
                  // pan为手势事件
                  eventType: 'pan'
               })
               this.gesToken = 0
            }
            return
         }

         this.moving = true
         this.touching = true

         // èŽ·å–元素ref
         const button = this.$refs['nvue-button'].ref
         const gap = this.$refs['nvue-gap'].ref

         const {
            min,
            max,
            step
         } = this
         const {
            left,
            width
         } = this.sliderRect

         // åˆå§‹å€¼ä¸ºæœ¬æ¬¡åç§»é‡x，加上次停止滑动时的结束值
         let exporession = `(${this.x} + x)`
         // å°†åç§»çš„x值，转为总位移的百分比值，为了和min和max进行判断
         exporession = `(${exporession} / ${width}) * 100`
         if (step > 1) {
            // å¦‚æžœstep步进大于1，需要跳步，所以需要使用Math.round进行取整
            exporession = `round(max(${min}, min(${exporession}, ${max})) / ${step}) * ${step}`
         } else {
            // å½“step=1时，无需跳步，充分利用bindingx性能，滑块实时跟随手势，达到丝滑的效果
            exporession = `max(${min}, min(${exporession}, ${max}))`
         }
         // å°†ç™¾åˆ†æ¯”最后转化为对应的px值
         exporession = `${exporession} / 100 * ${width}`
         // æœ€å¤§å€¼ä¸å…è®¸è¶…过轨迹的宽度
         const {
            sliderWidth
         } = this.sliderRect
         exporession = `min(${sliderWidth}, ${exporession})`
         // æ»‘块点总是需要一个左偏移的值，为自身宽度的一半
         const buttonExpression = `${exporession} - ${this.blockHeight / 2}`
         // é˜¿é‡Œä¸ºäº†KPI而开源的BindingX
         this.panEvent = BindingX.bind({
            anchor: button,
            eventType: 'pan',
            props: [{
               element: gap,
               // ç»‘定width属性，设置其宽度值
               property: 'width',
               expression
            }, {
               element: button,
               // ç»‘定width属性，设置其宽度值
               property: 'transform.translateX',
               expression: buttonExpression
            }]
         }, (e) => {
            if (e.state === 'end' || e.state === 'exit') {
               // 
               this.x = uni.$u.range(0, left + width, e.deltaX + this.x)
               // æ ¹æ®åç§»å€¼ï¼Œå¾—出移动的百分比，进而修改双向绑定的v-model的值
               const value = (this.x / width) * 100
               const percent = this.formatStep(value)
               // ä¿®æ”¹value值
               this.$emit('input', percent)
               // æ ‡è®°ä¸‹ä¸€æ¬¡è§¦å‘value的watch时，这个值的变化，是由内部改变的
               this.changeFromInside = true
               this.moving = false
               this.touching = false
            }
         })
      },
      // ä»Žvalue的变化，倒推得出x的值该为多少
      initX() {
         const {
            left,
            width
         } = this.sliderRect
         // å¾—出x的初始偏移值，之所以需要这么做，是因为在bindingX中，触摸滑动时，只能的值本次移动的偏移值
         // è€Œæ— æ³•çš„值准确的前后移动的两个点的坐标值，weex纯粹为阿里巴巴的KPI(部门业绩考核)产物，也就这样了
         this.x = this.value / 100 * width
         // è®¾ç½®ç§»åŠ¨çš„值
         const barStyle = {
            width: this.x + 'px'
         }
         // æŒ‰é’®çš„初始值
         const buttonWrapperStyle = {
            transform: `translateX(${this.x - this.blockHeight / 2}px)`
         }
         this.initButtonStyle({
            barStyle,
            buttonWrapperStyle
         })
      }
   }
}