当前位置: 首页 > Web前端 > HTML5

写一个基于moment的滑动日历

时间:2023-04-05 14:00:39 HTML5

效果如图(日期可以左右滑动)。思路:1、先获取相邻三个星期的数据。初始化时,容器向左移动视口一段距离,保证中间周在中间。viewingrange(可见范围内的index为1)2.触摸移动阶段,比如向左移动,相当于改变范围的index,为2,即通过范围向左移动两个视口的3.移动结束,此时右边没有要显示的数据,需要重组数据,然后向后添加一周,使得当前显示的周在中间,同时需要将显示的index改为11,日期数据按moment处理,在当前视口显示本周,由于需要滑动,需要准备今天前一周今天后一周lettoday=moment().format('YYYY-MM-DD')//当前日期:"2018-09-14"moment(today).subtract(7,'d').format('YYYY-MM-DD')//上周的今天:"2018-09-07"moment(today).add(7,'d').format('YYYY-MM-DD')//今天ofthenextweek:"2018-09-21"得到数组:dates可以根据这个数据生成三个模板,分别代表上周、本周和下周,然后计算出上周、本周和下周的明细周基于此数据。getDays:function(day){letarr=[]/*计算传入的日期作为星期几*/letweekOfDate=Number(moment(day).format('E'))//提前定义:这。week=['One','Two','Three','Four','Five','Six','Day']for(leti=0;i{{day.date.split('-')[2]}}

到这里,静态展示已经完成给组件添加滑动功能重写上面的页面渲染代码{{day.date.split('-')[2]}}
//actIndex:当前活动视图的缩影,初始值为1,sliderWidth:视口的宽度,distan:{x:0,y:0}:触摸移动的距离//getTransform:function(){this.endx=(-this.actIndex*this.sliderWidth)+this.distan.xletstyle={}style['transform']='translateX('+this.endx+'px)'//这一项一定要写,因为触摸移动时需要过渡动画,但是它是不是需要在动画结束的时候重新整理数据瞬间回到应该去的位置,总不能transitionanimationstyle['transition']=this.isAnimation吧?'transform.5sease-out':'none'returnstyle}Lasttouchtimeprocessing:touchStart:function(e){this.start.x=e.touches[0].pageX},touchmove:function(e){//这里需要过渡动画this.isAnimation=truethis.distan.x=e.touches[0].pageX-this.start.x//需要移动的容器letdom=this.$refs.sliders//向左移动this.endx=this.endx+this.distan.xdom.style['transform']='translateX('+this.endx+'px)'},touchend:function(e){this.isAnimation=truethis.distan.x=e.changedTouches[0].pageX-这个.start.x//rightif(this.distan.x>0){this.direction='right'this.actIndex=0}elseif(this.distan.x<0){this.direction='left'this.actIndex=2}this.distan.x=0},transition结束后重置容器位置//transitionendtransitionEnd:function(){this.isAnimation=falseif(this.actIndex===2){this.dates.push({date:moment(this.dates[this.actIndex].date).add(7,'d').format('YYYY-MM-DD')})this.dates.shift()this.actIndex=1}elseif(this.actIndex===0){this.dates.unshift({date:moment(this.dates[this.actIndex].date).subtract(7,'d').format('YYYY-MM-DD')})this.dates.pop()这.actIndex=1}}