bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,193 @@
/**
 * ä½¿ç”¨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 {
            // ä½ç§»çš„偏移量
            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().then((size) => {
                this.sliderRect = size
                this.initX()
            })
        },
        // èŽ·å–节点信息
        // èŽ·å–slider尺寸
        getSliderRect() {
            // èŽ·å–滑块条的尺寸信息
            // é€šè¿‡nvue的dom模块，查询节点信息
            return new Promise((resolve) => {
                this.$nextTick(() => {
                    dom.getComponentRect(this.$refs.slider, (res) => {
                        resolve(res.size)
                    })
                })
            })
        },
        // åˆå§‹åŒ–按钮位置
        initButtonStyle({
            barStyle,
            buttonWrapperStyle
        }) {
            this.barStyle = barStyle
            this.buttonWrapperStyle = buttonWrapperStyle
        },
        emitEvent(event, value) {
            this.$emit(event, value || this.value)
        },
        // æ»‘动开始
        async onTouchStart(e) {
            // if (this.disabled) return
            // // é˜»æ­¢é¡µé¢æ»šåŠ¨ï¼Œå¯ä»¥ä¿è¯åœ¨æ»‘动过程中，不让页面可以上下滚动，造成不好的体验
            // e.stopPropagation && e.stopPropagation()
            // e.preventDefault && e.preventDefault()
            // // æ›´æ–°æ»‘块的尺寸信息
            // this.sliderRect = await this.getSliderRect()
            // // æ ‡è®°æ»‘动过程中触摸点的信息
            // this.touchStart(e)
            // this.startValue = this.format(this.value)
            // this.dragStatus = 'start'

            // æ ‡è®°æ»‘动过程中触摸点的信息
            // this.touchStart(e)
        },
        // å¼€å§‹æ»‘动
        onTouchMove(e) {
            // if (this.disabled) return;
            // if (this.dragStatus === 'start') {
            //    this.$emit('drag-start')
            // }
            // // æ ‡è®°å½“前滑动过程中的触点信息，此方法在touch mixin中
            // this.touchMove(e)
            // this.dragStatus = 'draging'
            // const {
            //    width: sliderWidth
            // } = this.sliderRect
            // const diff = (this.deltaX / sliderWidth) * this.getRange()
            // this.newValue = this.startValue + diff
            // this.updateValue(this.newValue, false, true)
            // èŽ·å–元素ref
            // const button = this.$refs['nvue-button'].ref
            // const gap = this.$refs['nvue-gap'].ref

            //          animation.transition(gap, {
            //    styles: {
            //                  width: `${this.startX + this.deltaX}px`
            //    }
            // })
            // // console.log(this.startX + this.deltaX);
            // animation.transition(button, {
            //    styles: {
            //         transform: `translateX(${this.startX + this.deltaX}px)`
            //    }
            // })
            // this.barStyle = {
            //    width: `${this.startX + this.deltaX}px`
            // }
            const {
                x
            } = this.getTouchPoint(e)
            this.buttonWrapperStyle = {
                transform: `translateX(${x}px)`
            }
            // this.buttonWrapperStyle = {
            //    transform: `translateX(${this.format(this.startX + this.deltaX)}px)`
            // }
        },
        // onTouchEnd() {
        //    if (this.disabled) return;
        //    if (this.dragStatus === 'draging') {
        //       this.updateValue(this.newValue, true)
        //       this.$emit('drag-end');
        //    }
        // },
        updateValue(value, end, drag) {
            value = this.format(value)
            const {
                width: sliderWidth
            } = this.sliderRect
            const width = `${((value - this.min) * sliderWidth) / this.getRange()}`
            this.value = value
            this.barStyle = {
                width: `${width}px`
            }
            // console.log('width', width);
            if (drag) {
                this.$emit('drag', {
                    value
                })
            }
            if (end) {
                this.$emit('change', value)
            }
            if ((drag || end)) {
                this.changeFromInside = true
                this.$emit('update', value)
            }
        },
        // ä»Ž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
            })
        },
        // ç§»åŠ¨ç‚¹å æ€»é•¿åº¦çš„百分比，此处需要先除以step，是为了保证step大于1时，比如10，那么在滑动11,12px这样的
        // è·ç¦»æ—¶ï¼Œå®žé™…上滑块是不会滑动的，到了16,17px，经过四舍五入后，就变成了20px，进行了下一个跳变
        format(value) {
            return Math.round(uni.$u.range(this.min, this.max, value) / this.step) * this.step
        },
        getRange() {
            const {
                max,
                min
            } = this
            return max - min
        }
    }
}