摘要:使用 vue 制作个人图片展示网站总结
这个网站的设计稿很坑:网站主要用于展示图片,但设计根本不考虑屏幕的大小、比例等,直接给我 1920 的稿——图片太大、字体太小。幸好对细节要求不高,页面布局相同就可以
这个网站需要制作 pc 与手机两版,后台使用的是 php+mysql
pc 端没有什么大问题,但还是有些东西要总结下:
1.每个栏目要先获取当前栏目下的系列列表,再默认展示第一个系列。其中涉及到路由的跳转和模板的重复创建
2.不同系列可以有4种展示方案。一种是嵌入腾讯视频,一种是长图,剩下两种轮播。嵌入视频直接从后台获取链接拼到腾讯视频的播放器资源获取路径上,长图也是直接获取路径,后两种轮播使用surmon-china的vue-awesome-swiper实现
3.轮播图片懒加载
4.禁止轮播图片打开新的窗口
手机端与 pc 端相比要多了个需求:点击图片后预览图片,并且可以移动、缩放,我使用腾讯AlloyTeam的手势库AlloyFinger实现。手机上体验官方的示例
年前就该总结的,拖延症…