Vue实现无限滑动周选择日期的组件代码怎么写

这篇文章主要介绍"Vue实现无限滑动周选择日期的组件代码怎么写"，在日常操作中，相信很多人在Vue实现无限滑动周选择日期的组件代码怎么写问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"Vue实现无限滑动周选择日期的组件代码怎么写"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

思路

根据用户传入日期（不传默认今天），获取上一周，当周，下一周对应的日期放数组dates里

let vm = this  this.dates.push(   {    date: moment(vm.defaultDate).subtract(7, 'd').format('YYYY-MM-DD'),   },   {    date: vm.defaultDate,   },   {    date: moment(vm.defaultDate).add(7, 'd').format('YYYY-MM-DD'),   }  )

根据datas 生成每一周对应的日期

getDaies (date) {   let vm = this,    arr = []   let weekOfDate = Number(moment(date).format('E'))   let weeks = ['日', '一', '二', '三', '四', '五', '六']   let today = moment()   let defaultDay = moment(vm.defaultDate)   for (var i = 0; i < 7; i++) {    let _theDate = moment(date).subtract(weekOfDate - i, 'd')    arr.push({     date: _theDate.format('YYYY-MM-DD'),     week: weeks[i],     isToday: _theDate.format('YYYY-MM-DD') === today.format('YYYY-MM-DD'),     isDay: _theDate.format('E') === defaultDay.format('E')    })   }   return arr  }

生成每一个滑动单元的style

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.isAnimation ? 'transform 0.5s ease-out' : 'transform 0s ease-out'   return style  }

然后就是处理touchstart touchend touchmove事件了，这里就不贴代码了，说下逻辑：

• ouchstart 记录滑动起点位置

• touchmove 获得滑动距离赋值给 vm.distan.x 实时获得当前周transform

• touchend 改变activeIndex的值，当然改变activeIndex的值是不够的，要实现无限滑动，就要在操作一下dates，如果是左滑删除dates的第一个元素并且往dates里面push下下周对应日期，如果是右滑删除最后一个元素并网数组前面unshift上上周对应的日期

到此，关于"Vue实现无限滑动周选择日期的组件代码怎么写"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！