时间选择器

组件分析

1 .固定时间点:传入开始时间和结束时间,时间间隔,点击选择框的时候生成所有时间--拓展就是可以做个层级二级菜单,上/下午-一个小时分成几个时间段。
2 .任意时间点:鼠标滚轮实现所有的列表选择,并且是有过渡动画的。
3 .

props收获

1 .所有的prop在组件中使用的时候都要a-b,获取的时候要使用驼峰就可以获取到
2 .prop一次传入一个数组的操作可以更加简便和直观的输入控制变量
3 .数字,布尔值在传递时候,都必须使用v-bind来传递,不然会认为是字符串,当然这些也可以写到一个对象里面,像上面说的一样直接都用对象打包传递,也是可以收到的。

页面滚动动画

1 .scroll事件的参数
2 .思路就是通过检测scroll事件,然后动态改变元素的位置,通过给位置加上atransition 过渡事件来实现优化。但是好像性能有问题,所以直接使用那个better-scroll组件库算了
3 .

bug

1 .依据时间间隔计算出来的东西可能会少一个,那是因为可能是秒种那里变化,使得相减的部分出现了还要除的部分出现了一个取余会多一个的东西,所以直接每次多算一个,最后在减掉算了。

收集的技巧

1 .在进行hover特效的展示的时候,比如border颜色变换,可以直接使用border-color,原来是直接改整个border:会发生重绘,页面会产生抖动。

后续加强

1 .在第一次选完时间之后,下一次打开的时候自动滚动到上次选的时间那里,因为差的可能就那么一点。
2 .上面那个一会做了算了。
3 .实现原理:两个标记点:点击输入框的时候查看是否是第一次点击 在每一次滚动完毕之后把把位置坐标传递出去,,如果不是第一次的点击开来的话,就需要使用scroll事件来移动显示的东西。

你可能感兴趣的:(时间选择器)