Vue范围滑块使页面无法在移动设备上滚动

Posted 2023-02-18

技术标签:

【中文标题】Vue范围滑块使页面无法在移动设备上滚动【英文标题】：Vue range slider making page not scrollable on mobile 【发布时间】：2020-07-07 08:35:55 【问题描述】：

在 VUE 中，我有一个范围滑块组件，用于在用户拖动滑块时在设定点显示不同的值。这一切都很好，我唯一的问题是滑块 VUE 滑块组件使我的页面无法在移动设备上滚动。浏览器是否以某种方式与拖动操作混淆，这意味着它不知道它发生在滑块上而是在实际页面上？有什么想法可以解决这个问题吗？谢谢

<div class='slider margin-top-10 margin-bottom-40'>
    <range-slider
        v-model="value"
        :min="min"
        :max="max"
        :step="step"
        :range="range"
        :
        :dot-
        :dot-
        :piecewise-label="label"
        :process-style="processstyle">
    </range-slider>
</div>

import RangeSlider from 'vue-range-component'
export default 
    components: 
        RangeSlider
    ,
    props: 
        membership: 
            type: Object,
        ,
        translations: 
            type: Object
        ,
        isAgency: 
            type: Boolean
        ,
        clientsCap: 
            type: Number
        
    ,
    data: function() 
        return 
            value: 10,
            min: 10,
            max: 50,
            step: 10,
            data: [10, 20, 30, 40, 50,],
            range: [label: '10', label: '20', label: '30', label: '40', label: '50'],
            label: true,
            barheight: 3,
            dotwidth: 16,
            dotheight: 16,
            processstyle:  backgroundColor: 'transparent'
        
    ,
    created: function()
        this.$emit('updateImages', this.value);
    ,
    watch: 
        value: function()
            this.$emit('updateImages', this.value);
        
    ,
    computed: 
        price: function() 
            var price = this.value * this.membership.additional_images;
            if(this.isAgency)
                price = price * this.clientsCap;
            if(this.membership.priceOffered < this.membership.basePrice && this.membership.priceOffered !== undefined)
                price = price - (price * 0.10);

            return price;

【问题讨论】：

在范围滑块上设置背景颜色并在移动浏览器上进行测试。也许它填满了所有的浏览器屏幕 @hamidkeyhani 试过了，滑块没有填满浏览器屏幕。我还注意到，当页面上出现滑块时，我无法在输入框中输入内容 【参考方案1】：

我还遇到了输入文本输入字段的问题，以及滚动在移动设备上被阻止的事实。

为了解决这个问题，我下载了库本身并删除了所有事件处理方法和键（keydown、keyup），这有助于解决文本输入问题。滚动需要删除f = "touchstart"这一行

【讨论】：

【参考方案2】：

这个错误已经在 github repo 中修复，但 npm repo 没有更新。 https://github.com/xwpongithub/vue-range-slider/blob/master/src/js/vue-range-slider.js#L1006

所以你需要从 npm 中移除已安装的包

"vue-range-component": "^1.0.3",

直接从github添加

"vue-range-component": "xwpongithub/vue-range-slider",

【讨论】：

你刚刚救了我的命。谢谢这个修复帮助我【参考方案3】：

您需要清除以下行：x="" 和 w="" 这是粗略的第 73 和 74 行

【讨论】：

【参考方案4】：

解决这个问题的方法可能如下。在你有这个组件的 Vue 创建的函数中，放置以下行。

created () 
    VueRangeSlider.methods.handleKeyup = ()=> console.log;
    VueRangeSlider.methods.handleKeydown = ()=> console.log;
,

【讨论】：