最近室友遇到的一个面试案例题,具体要求如下:
- 日历面板的展开折叠,在整个页面内下拉展开日历面板,上滑折叠日历面板
- 选择日期,点击日期时选中某天,日期背景颜色发生变化,可切换的其他日期,不能同时选中,“今天”的日期未选中时背景样式有差异。
- 切换星期,在日历面板未展开状态下,在日历面板上左右滑动来切换星期,向左滑下一星期,向右滑上一星期
- 切换月份,在日历面板展开状态下,在日历面板上左右滑动来切换月份,向左滑下一月,向右滑上一月
- 回到今天,点击页面右上角“今天”时,选中今天的日期,日历面板回到今天的状态
- 切换“已设置提醒、创建时间、最后发言时间”标签,底部小三角会按照圆弧角度旋转的相应位置,注意小三角的角度有微小的变化,动画效果要非线性。
- UI界面数据只是提供展示效果,请结合后台接口使用实际数据
下图是我做的页面效果和代码,用的是vue框架。
只实现了大部分功能,github上接口地址我隐藏了。主要是分享一下vue小案例。
这里附上小案例github地址:https://github.com/xbN9/vue-date-matter
日历部分代码参考了另一个同学:http://bjbsair.com/2020-04-01/tech-info/18412.html
写bug改bug,坚持不懈