小程序diamante

jiangping

2023-10-26 627c3e0a6920131d75eafa4646db373ccc936546

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,113 @@
/**
 * ä½¿ç”¨æ™®é€šçš„js方案实现slider
 */
export default {
    watch: {
        value(n) {
            // åªæœ‰åœ¨éžæ»‘动状态时，才可以通过value更新滑块值，这里监听，是为了让用户触发
            if (this.status === 'end') {
                this.updateSliderPlacement(n, true)
            }
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.getSliderRect()
        },
        // èŽ·å–slider尺寸
        getSliderRect() {
            // èŽ·å–滑块条的尺寸信息
            setTimeout(() => {
                this.$uGetRect('.u-slider').then((rect) => {
                    this.sliderRect = rect
                    this.updateSliderPlacement(this.value, true)
                })
            }, 10)
        },
        // æ˜¯å¦å¯ä»¥æ“ä½œ
        canNotDo() {
            return this.disabled
        },
        // èŽ·å–当前手势点的X轴位移值
        getTouchX(e) {
            return e.touches[0].clientX
        },
        formatStep(value) {
            // ç§»åŠ¨ç‚¹å æ€»é•¿åº¦çš„百分比
            return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step
        },
        // å‘出事件
        emitEvent(event, value) {
            this.$emit(event, value || this.value)
        },
        // æ ‡è®°å½“前手势的状态
        setTouchStatus(status) {
            this.status = status
        },
        onTouchStart(e) {
            if (this.canNotDo()) {
                return
            }
            // æ ‡ç¤ºå½“前的状态为开始触摸滑动
            this.emitEvent('start')
            this.setTouchStatus('start')
        },
        onTouchMove(e) {
            if (this.canNotDo()) {
                return
            }
            // æ»‘块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
            const x = this.getTouchX(e)
            const { left, width } = this.sliderRect
            const distanceX = x - left
            // èŽ·å¾—移动距离对整个滑块的百分比值，此为带有多位小数的值，不能用此更新视图
            // å¦åˆ™é€ æˆé€šä¿¡é˜»å¡žï¼Œéœ€è¦æ¯æ”¹å˜ä¸€ä¸ªstep值时修改一次视图
            const percent = (distanceX / width) * 100
            this.setTouchStatus('moving')
            this.updateSliderPlacement(percent, true, 'moving')
        },
        onTouchEnd() {
            if (this.canNotDo()) {
                return
            }
            this.emitEvent('end')
            this.setTouchStatus('end')
        },
        // è®¾ç½®æ»‘点的位置
        updateSliderPlacement(value, drag, event) {
            // åŽ»æŽ‰å°æ•°éƒ¨åˆ†ï¼ŒåŒæ—¶ä¹Ÿæ˜¯å¯¹step步进的处理
            const { width } = this.sliderRect
            const percent = this.formatStep(value)
            // è®¾ç½®ç§»åŠ¨çš„值
            const barStyle = {
                width: `${percent / 100 * width}px`
            }
            // ç§»åŠ¨æœŸé—´æ— éœ€è¿‡æ¸¡åŠ¨ç”»
            if (drag === true) {
                barStyle.transition = 'none'
            } else {
                // éžç§»åŠ¨æœŸé—´ï¼Œåˆ æŽ‰å¯¹è¿‡æ¸¡ä¸ºç©ºçš„声明，让css中的声明起效
                delete barStyle.transition
            }
            // ä¿®æ”¹value值
            this.$emit('input', percent)
            // äº‹ä»¶çš„名称
            if (event) {
                this.emitEvent(event, percent)
            }
            this.barStyle = barStyle
        },
        onClick(e) {
            if (this.canNotDo()) {
                return
            }
            // ç›´æŽ¥ç‚¹å‡»æ»‘块的情况，计算方式与onTouchMove方法相同
            const { left, width } = this.sliderRect
            const value = ((e.detail.x - left) / width) * 100
            this.updateSliderPlacement(value, false, 'click')
        }
    }
}