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 14 Javascript
jQuery is()函数用法3例
May 06 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
js获取图片宽高的方法
Nov 25 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
JavaScript获取URL参数的方法分享
Apr 07 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
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
php设计模式 Command(命令模式)
2011/06/26 PHP
prototype 中文参数乱码解决方案
2009/11/09 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
ES6学习教程之模板字符串详解
2017/10/09 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
python实现批量图片格式转换
2020/06/16 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
python 如何调用 dubbo 接口
2020/09/24 Python
python安装及变量名介绍详解
2020/12/12 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
flask框架中的cookie和session使用
2021/01/31 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
机电专业大学生求职信
2013/10/04 职场文书
心理健康课教学反思
2014/02/13 职场文书
C++程序员求职信范文
2014/04/14 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
学生保证书
2015/01/16 职场文书
房贷收入证明范本
2015/06/12 职场文书
mysql自增长id用完了该怎么办
2022/02/12 MySQL