移动端的时间选择器

移动端的划动时间选择器

  在工作当中,遇见了一个UI效果,是让用户划动选择1到12小时,在网上没有找到现成的,就自己写了一个,基本可以满足效果,GitHub地址:https://github.com/Jin0811/TimePicker.git,样式如下:
移动端的时间选择器_第1张图片
  这个选择器只适合移动端的使用,PC端不能使用,用户在划动的时候,样式也会相应地发生变化。’
  所有的样式和代码,都放在了我的GitHub上面,这里大概说一下我实现的想法,要注意的是,我只是写了个弹出层的样子,并没有写弹出层。
  页面当中,一共有14个li,其中第一个和最后一个li是空白的,作用就是占位,可以让第一个和最后一个小时滑动到中间部位。
  可以看到每一次滑动,都会刚好到一个li的位置上,这个利用了ontouchend事件,在用户停止划动之后,检查ul的scrollTop值,再与刚好到每一个li的scrollTop相比,离哪个值比较近就让ul滚动到哪个值。
  例如,初始时ul的scrollTop为0,此时显示的是1小时,一个li的高度为30,那么当ul的scrollTop为30时,显示的就是2小时,为60时就是3小时,那么当ul停止滑动时的scrollTop小于15时,就让它的值为0,当大于15,小于45时,让ul的scrollTop值为30,显示第二个,依次类推。
  ontouchmove事件主要用于用户在划动的过程当中,修改当前li以及当前li前两个和后两个li的样式。

范围 对应scrollTop值 对应的小时
0-15 0 1
15-45 30 2
45-75 60 3
75-105 90 4
105-135 120 5
135-165 150 6
165-195 180 7
195-225 210 8
225-255 240 9
255-285 270 10
285-315 300 11
315-345 330 12

注意

  • 在使用之前必须先引入jquery
  • 这里的小时可以变为月份,其他的城市、分钟选择器应该也可以进行修改
  • 每个li的高度可以改变,但是CSS当中一些样式也要进行改变,我进行了标注

你可能感兴趣的:(JS高级应用,二十六的练习)