左右滑动无限加载周日历

8,997 阅读6分钟

技术栈

vue+swiper

功能清单

1、进来默认加载当前周日历

2、左滑动加载上一周的日历

3、右滑动加载下一周的日历

4、如果为今天日期显示今字体图标

5、左滑动高亮当前星期六

6、右滑动高亮当前星期一

7、点击高亮选中的日期

8、滑动指示器跟随动画移动

9、用三个ul完成了无限加载日期替换

难点

做这个左后滑动的日历之前, 首先无从下手的 有两个地方

第一: 该怎么实现左右滑动效果;

第二: 展示的日期和对应的星期是怎么计算的;

第三:怎么才能做到无限加载日历

滑动可以用swiper来做里面包含的各种滑动监听事件都有.在这些监听事件中可以做对应的操作然后就是日期的展示计算,困惑了我好久,通过百度搜 也简直就是一个坑! 计算当前日期, 计算这个月多少天, 计算今天是星期几..........那么下个月呢?再这样计算一下?

妹的,在这个坑里还真是搞了3天,愣是没搞出来,因为仅仅封装的计算方法都封装了10个! 搞到最后自己都头晕了....然后百度下看到了通过js方法是可以自动识别转换成当天是 几月几号星期几的;那么一周的日期就是从一周的开始到一周的结束那就是七天想明白了就做;

思路

首先 我拿到今天是星期几. 因为效果图上显示的是一周的日期. 那么我根据今天的星期 ,封装了一个方法: 计算当天是星期几,然后减去到一周的开始, 如果今天是星期三那么我就减去三就到星期日了,因为我的是从星期日开始的,然后我全局存一个星期日的日期作为下一周的开始,再然后一周时间是7天,我通过循环7天得到了这一周的日期返回给我一个数组, 数组里装了 这一周的日期相关的数据然后展示到item上.有了思路简单不? 封装的方法自己去写,也不难的;

下面来说左右滑动,是不是要显示下一周的日期.那么你把 数组里面记录本周的日期都加7天是不是就是下周的日期了?比如今天是星期日7号,那么7号 + 一周的日期,得到的是不是就是下周的星期日是14号?那么你根据这个思路再去封装一个方法: 右滑动,根据当前保存的日期,加载下一周日期的数组,你就要把数组中所有日期都增加7天;左滑动,加载上一周的日期, 你就要把数组中所有日期都减去7.这就是实现这个功能的思路!

效果优化一

初步思路有了就该针对效果进行优化了!效果优化一: 左右滑动时 , 我们其实是要预先计算好上周和下周的日期数组的当你滑动的时候,如果下周的时间戳还没计算出来, 这时候,你滑的时候,是不是机器还没计算好呢..你轻轻一滑,就会看到的是空白. 所以我们需要把本周,上周,下周的日期都给计算处理好. 滑动的同时,进行展示,同时: 重点!!!!同时, 滑动的同时, 计算根据当前滑入的日期,再计算好上周,下周的日期,备你下次滑动的时候展示.懵逼了有木有!!!!!

简而言之: 滑动的时候,需要触发的方法就是: 根据你当前当前显示的日期, 如果左滑,让当前日期减去一周, 如果右滑,让当前日期增加一周;

效果优化二

无限滚动!类似于无限轮播效果.无非就是 (0 ,1, ,2)三个页面,第 0个页面展示上周的日期, 第1个页面展示本周的日期,第2个页面展示下周的日期, 这里的处理方法与无限轮播图的原理是一样的(用3个页面实现无限轮播效果)... 如果做过轮播图的,你就应该有印象,,,如果没做过,我给你说下为啥要这么处理.....当你左滑或者右滑滑动结束的一瞬间,让它立即再返回到1 的页面.....比如当你从1 左滑到了2的页面. 这时候立马让他滚动到1. 同时刷新显示的数据或者当你从1右滑到了0的页面,这时候立马让他滚回到1 同时刷新显示的数据因为动画效果设置成0秒. 所以闪的那一瞬间你是看不到的. 这个你可以放心的使用,是不会影响用户体验的为什么要这么做?你可以拿个笔在纸上画画 想想.......我们之前提到的0界面显示的是上周的日期, 1界面显示的是本周的日期,2界面显示的是下周的日期

滑动的时候我们调用了计算日期的方法..方法计算完了,所有的日期数值都改变了.同时你滑动也完成了,如果你左滑动了,这时候其实1界面显示的是下周的数据了,而2界面显示的是下下周的数据了,所以我们要瞬间要它赶紧滑动回1界面 才是正确的.. 于此同时 不管怎么滑动,我们滑动结束的时候,让它永远都停留在角标为1的界面. 是不是也实现了 用3个页面实现无限轮播图的效果...如果你也正在做这个功能,那么幸运的你用2天甚至更短的时间就能实现这个功能, 当初没思路 的我,在坑里7多天才跳出来......

如果你只是无聊点开这个帖子的, 哈哈 ,我相信你也会被这复杂的逻辑给绕晕的. 毕竟无限轮播图原理谁都知道,但是每次自己去写的时候,会发现 !我的天呢,竟然是酱紫啊!!!哈哈

图片

思路来源于这篇文章 仿钉钉左右滑动日历 思路来源

github地址欢迎给个star