原生js实现滑动进度条

原生js实现滑动进度条

实现原理

首先是用touchmove()时间获取到移动端事件参数,保存下进度条的最大长度,可理解为滑块可移动的距离,
滑块滑动到最左边与最右边就滑不动,我们假设触摸区域在滑块的正中间,那么我们触摸的点与滑块的最左边相差值为滑块宽度的一半。

在按住移动的同时去改变精度条的长度和按钮的相对左部的距离。

然后就是距离的计算,主要利用的就是pageX() 属性。pageX是鼠标指针相对于文档的左边缘的位置。在触摸按下是就记录相对位置,在按住移动后就可求出手指移动的距离。从而改变按钮位置和进度条长度。

实现效果

屏幕快照 2018-11-15 下午3.58.19.png

贴上代码



    
        
        
        
        
        手动滑动进度条
               
    
    
        

人均预算(元)

1千 3千 5千 1万 2千+ 不限

别走开,下一篇我们来探讨一下如何控制下方文字根据进度条的进度来展示选中状态

你可能感兴趣的:(原生js实现滑动进度条)