选择Vue无限滑动周日期的组件示例代码

以前做一个手机项目，需要一个插件左右滑动(每周滑动)选择日期，当时这个项目没有用到Vue。当时没有找到合适的第三方插件，就花了一些时间用原生JavaScript写出来。当时想把它写成一个基于Vue的组件，短时间就做出来了！在这个过程中遇到了坑，后面会提到！

先看效果

思路

根据用户传入的日期(默认今天不传入)，获取前一周、本周、下一周对应的日期，放入日期数组中

让VM=this . date . push({ date : moment(VM . DefaultDate))。减去(7，' d ')。格式(' YYYY-MM-DD ')，}，{ date: vm.defaultDate，}，{ date : moment(VM . default date)。添加(7，' d ')。格式(' yyyy-mm-DD ')，})根据数据生成每周对应的日期

getdaies(date){让VM=this，arr=[]让weekdate=number (moment (date))。format ('e ')让weeks=['day '，' one '，' two '，' three '，' four '，' five '，6']让today=moment()让default day=moment(VM . default date)为(var I=0；i7；I){ let _ ThEnd=时刻(日期)。减法(weekOfDate - i，' d ')arr . push({ date : _ dDATE . format(' YYYY-MM-DD ')，week: weeks[i]，Istoday : _ dDATE . format(' YYYY-MM-DD ')==today . format(' YYYY-MM-DD ')，is day : _ dDATE . format(' e ')==default day . format(' e ' })

getTransform(index){ let VM=this let style={ } if(index===VM . activeindex){ style[' transform ']=' translateX(' VM . distan . x ' px)' } if(index VM . activeindex){ style[' transform ']=' translateX(-100%)' } if(index VM . activeindex){ style[' transform ']=' translateX(100%)' } style[' transition ']=VM . is imation？Transform0.5s放松' :' transform0s放松'返回样式}然后我们将处理touchstart touchend touchmove事件，因此我们不会在此处发布代码。让我们谈谈逻辑：

Ouchstart记录滑动起始位置touchmove，获取滑动距离，赋给vm.distan.x，实时获取transformtouched在当前一周内改变的activeIndex的值。当然，改变活动索引的值是不够的。要实现无限滑动，需要操作日期。如果向左滑动以删除日期的第一个元素并将对应于下一周的日期推入日期，如果向右滑动以删除对应于最后一个元素的网格连接数组之前未移位的最后一周的日期坑。

因为这个组件是由css3的过渡动画化的，所以一开始我在css中写了过渡： Transform 0.5Ease-out。谁知道他欺骗了自己，因为最后我们更改了activeIndex之后，还要删除一个日期，在数组中增加一个元素，这样就会引起日期的变化，然后导致Vue再次更新界面，导致动画再次出来！想到的最后一个解决方案是引入一个变量isAnimation来控制转换的值。只有当它滑动时，过动画效果才会打开，然后日期会在听完过渡和时间重置后更新isAnimation=false

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。