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


Posted in Javascript onJuly 18, 2018

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

坑点

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

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

Javascript 相关文章推荐
js 深拷贝函数
Dec 04 Javascript
JavaScript 数组运用实现代码
Apr 13 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
Oct 24 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 #Javascript
webpack4.x打包过程详解
Jul 18 #Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 #Javascript
Vue隐藏显示、只读实例代码
Jul 18 #Javascript
详解vue中axios的封装
Jul 18 #Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 #Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 #Javascript
You might like
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
vue模块拖拽实现示例代码
2019/03/09 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
Python实现进程同步和通信的方法
2018/01/02 Python
python学生管理系统代码实现
2020/04/05 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
新闻专业个人求职信
2013/12/19 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
地道战观后感500字
2015/06/04 职场文书
详解Java实践之适配器模式
2021/06/18 Java/Android
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python