项目预览地址:https://huyiling1111.gitee.io/myproject
github源码地址:https://github.com/huyiling1111/myproject.git
本篇博客就是记录自己做这个喵喵电影的项目细节和遇到的坑
文章目录
技术栈
- vue-cli
- vuex
- vue-router
- mint-ui
- axios
- better-scroll
- iconfont
- swiper
项目大致分为7个页面
- 首页页面1(正在热映)
- 首页页面2(即将上演)
- 电影详情页面
- 电影详情页面(含弹出没有排期)
- 城市列表页面
- 电影院地址页面
- 我的页面
项目页面截图
*截图顺序根据前面项目分类顺序一致
项目目录树桩结构分析图
项目功能分析
项目吸顶效果
*场景描述:当滚动条滚动轮播的位置后,项目一直处于顶端。
知识要点:
1.获取滚动距离:document.documentElement.scrollTop
2.获取轮播的高度:ref属性绑定
使用ref属性注册引用信息,如果在普通dom元素上使用,引用信息就是元素;如果在子组件上,引用信息就是组件实例。
轮播效果,两个组件 调用同个swiper组件 展示不同的样式
*场景描述:页面有两个轮播,如何让一个轮播图展示3张,另一个展示4张
解决思路:在文件1对两个组件绑定不同的class值,在文件2 通过props传入对应的class值,在new swiper初始化的时候绑定对应的class名。perview同理
引入better-scroll库,获得滚动平滑的效果
*场景描述:假如页面的数据较多的情况下,引入better-scroll库,将页面固定div大小,获得更顺滑的滚动页面。
知识要点:
1.this.$nextTick(回调函数)
vue更新dom是异步的,等待数据变化完毕后更新dom
vuex全局状态管理(减少数据请求次数)
*场景描述:首页中来回切换正在热映和即将上映两个选项卡,会导致数据重复请求
解决思路:使用vuex异步数据请求(action- mutation -state),数据会缓存在store中,只要不刷新就不会消失。
分批加载数据,防止页面阻塞
*场景描述:原先axios已经获取了第一页的数据,通过判断页面滚动与底部的距离,触发获取第二页的数据和禁用无限滚动。
引入插件mintUI-indexList索引列表
*解决思路:1.将一组没有顺序的数据,通过数据排序整理成按字母索引分类对应的数据
2.每次点击列表城市能获取对应的cityid,根据cityid存入localstore中
项目中遇到的问题总结
1.数组里面单个元素的更新不会引起dom更新
2.下载better-scroll插件时,会把原来的swiper插件删除
3.打包项目的时候,index文件不会显示需要修改路径改为./
4.数据请求还有一种情况是需要带有请求字段