vue实例:日历相关应用

最近室友遇到的一个面试案例题,具体要求如下:

  1. 日历面板的展开折叠,在整个页面内下拉展开日历面板,上滑折叠日历面板
  2. 选择日期,点击日期时选中某天,日期背景颜色发生变化,可切换的其他日期,不能同时选中,“今天”的日期未选中时背景样式有差异。
  3. 切换星期,在日历面板未展开状态下,在日历面板上左右滑动来切换星期,向左滑下一星期,向右滑上一星期
  4. 切换月份,在日历面板展开状态下,在日历面板上左右滑动来切换月份,向左滑下一月,向右滑上一月
  5. 回到今天,点击页面右上角“今天”时,选中今天的日期,日历面板回到今天的状态
  6. 切换“已设置提醒、创建时间、最后发言时间”标签,底部小三角会按照圆弧角度旋转的相应位置,注意小三角的角度有微小的变化,动画效果要非线性。
  7. UI界面数据只是提供展示效果,请结合后台接口使用实际数据

下图是我做的页面效果和代码,用的是vue框架。

只实现了大部分功能,github上接口地址我隐藏了。主要是分享一下vue小案例。 

这里附上小案例github地址:https://github.com/xbN9/vue-date-matter

日历部分代码参考了另一个同学:http://bjbsair.com/2020-04-01/tech-info/18412.html

写bug改bug,坚持不懈

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值