自制简单的range(Vue)

废话不多说先上成果图

实现思路

主要分界面与逻辑两大块

界面分为5个部分

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

逻辑

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

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

1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部