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

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

以上就是“Vue无限滑动周选择日期的组件怎么实现”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注本站行业资讯频道。