Vue仿移动端喵喵电影项目解析

项目预览地址：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.数据请求还有一种情况是需要带有请求字段