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

 更新时间:2018年07月18日 10:37:11   作者:叁木  
这篇文章主要介绍了Vue无限滑动周选择日期的组件的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

之前在做一个手机端项目的时候,需要一个左右滑动(按周滑动)选择日期插件,而且当时这个项目没有用到Vue。当时又没有找到合适的第三方插件,就花了点时间用原生JavaScript写了出来,当时心中就想把它写成基于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上上周对应的日期

坑点

因为这个组件是通过css3的transition来实现动画的,最开始我是把所用三个滑动元素在css里面写了transition:transform 0.5s ease-out; 谁知道自己把自己坑了,因为最后我们改变activeIndex后要删除一个日期,还要往数组里面新增一个元素,这样就会引起dates的改变,进而引起Vue去重新更新界面,导致动画又出来了!最后想到的解决办法就是引入一个变量isAnimation来控制transition的值,只有当滑动的时才开启过度动画效果,再侦听transitionend时间重置isAnimation = false后再更新dates

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue中关于this.refs为空出现原因及分析

    vue中关于this.refs为空出现原因及分析

    这篇文章主要介绍了vue中关于this.refs为空出现原因及分析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue 中固定导航栏的实例代码

    vue 中固定导航栏的实例代码

    今天小编就为大家分享一篇vue 中固定导航栏的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue如何跨组件传递Slot的实现

    Vue如何跨组件传递Slot的实现

    这篇文章主要介绍了Vue如何跨组件传递Slot的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • Composition API思想封装NProgress示例详解

    Composition API思想封装NProgress示例详解

    这篇文章主要为大家介绍了Composition API思想封装NProgress示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • element-ui 表格实现单元格可编辑的示例

    element-ui 表格实现单元格可编辑的示例

    下面小编就为大家分享一篇element-ui 表格实现单元格可编辑的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue里的axios如何获取本地json数据

    vue里的axios如何获取本地json数据

    这篇文章主要介绍了vue里的axios如何获取本地json数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue任意关系组件通信与跨组件监听状态vue-communication

    vue任意关系组件通信与跨组件监听状态vue-communication

    这篇文章主要介绍了vue任意关系组件通信与跨组件监听状态vue-communication,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • 利用Vite2和Vue3实现网站国际化的全过程

    利用Vite2和Vue3实现网站国际化的全过程

    vite2已经出来一段时间了,最近没忍住尝试了一下,这篇文章主要给大家介绍了关于利用Vite2和Vue3实现网站国际化的相关资料,需要的朋友可以参考下
    2021-08-08
  • 详解axios在vue中的简单配置与使用

    详解axios在vue中的简单配置与使用

    本篇文章主要介绍了详解axios在vue中的简单配置与使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 在vue中如何封装G2图表

    在vue中如何封装G2图表

    这篇文章主要介绍了在vue中如何封装G2图表,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论