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实现无限滑动周选择日期的组件代码-创新互联
标题网址：http://cdiso.cn/article/cdscjc.html
