自制简单的range(Vue)

废话不多说先上成果图

image

实现思路

主要分界面与逻辑两大块

界面分为5个部分

  • 左滑块长度
  • 左内容位置
  • 中间长度
  • 右滑块长度
  • 右内容位置

逻辑

  • touch3个事件
  • 各滑块长度及位置计算
  • 选中时变色
具体实现步骤
  1. 首先我们明白整个容器的长度是不变的等于左边+中间+右边所以我们可以通过先获取总的容器的宽度并用变量进行保存,这里我用的就是屏幕的宽度。
  1. 添加vue的三种touch事件
  1. 使用类绑定的方式,在touchStart事件触发的方式,修改点击的滑块的样式,在松开时触发touchend事件,恢复原来的样式
  1. 滑动时三大块核心宽度及位置的计算,因为滑动中坐标轴是实时变化,这里我们使用vue的计算属性进行操作
  1. 滑动事件中,界面变化及左右两边滑动距离的记录

6.文本内容通过计算值便可实现

核心代码就这些了,撒花完结,优化什么的,你们自己看着来咯

这是我的github,欢迎大佬们猛戳,不定时更新

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复