Vue Day 18——项目
概述
经历了这么久的学习,下面这是开展项目的制作首先先给出项目成型图
项目一些思路
一. 项目基本设置
1.1. 目录结构
- network
- components -> common/content
- pages -> 路由分层
- common
- assets
- router
- store
1.2. 设置CSS初始化和全局样式
- initialize.css
- base.css
1.3. tabbar的封装
- 封装HYTabbar
- 封装HYTabbarItem
- 响应点击切换的设计
- 封装完成后,使用时对HYTabbar重新包装
1.4. axios的封装
- 创建axios实例
- 拦截响应,返回.data数据
- 根据传入的options发送请求,并且调用对应resolve和reject
二. 首先开发
2.1. navbar的封装和使用
- 封装navbar包含三个插槽:left、center、right
- 设置navbar相关的样式
- 使用navbar实现首页的导航栏
2.2. 请求首页数据
- 封装请求首页更多数据
- 将banner数据放在banners变量中
- 将recommend数据放在recommends变量中
2.3. 根据Swiper封装HomeSwiper
- 使用Swiper和SwiperItem
- 传入banners进行展示
2.4. 封装FeatureView
- 传入recommends数据,进行展示
2.5. 封装RecommendView
- 展示一张图片即可
2.6. 封装tabControl
- 基本结构的封装
- 监听点击
2.7. 请求和保存商品数据
- 定义goodsList变量,用于存储请求到的商品数据
- 根据type和page请求商品数据
- 将商品数据保存起来
2.8. 封装GoodsList和GoodsListItem
- 展示商品列表,封装GoodsList
- 列表中每一个商品,封装GoodsListItem
- 注意CSS属性的设置即可
2.9. 滚动的封装Scroll
- 学习BetterScroll的使用
- 安装better-scroll
- 封装一个独立的组件,用于作为滚动组件:Scroll
- 组件内代码的封装:
- 1.创建BetterScroll对象,并且传入DOM和选项(probeType、click、pullUpLoad)
- 2.监听scroll事件,该事件会返回一个position
- 3.监听pullingUp事件,监听到该事件进行上拉加载更多
- 4.封装刷新的方法:this.scroll.refresh()
- 5.封装滚动的方法:this.scroll.scrollTo(x, y, time)
- 6.封装完成刷新的方法:this.scroll.finishedPullUp
2.10. 上拉加载更多
- 通过Scroll监听上拉加载更多。
- 在Home中加载更多的数据。
- 请求数据完成后,调动finishedPullUp
2.11. 返回顶部
- 封装BackTop组件
- 定义一个常量,用于决定在什么数值下显示BackTop组件
- 监听滚动,决定BackTop的显示和隐藏
- 监听BackTop的点击,点击时,调用scrollTo返回顶部
2.12. tabControl的停留
-
重新添加一个tabControl组件(需要设置定位,否则会被盖住)
-
判断是否滚动超过了offsetTop来决定是否显示新添加的tabControl
-
获取到tabControl的offsetTop
- 必须知道滚动到多少时, 开始有吸顶效果, 这个时候就需要获取tabControl的offsetTop
- 但是, 如果直接在mounted中获取tabControl的offsetTop, 那么值是不正确.
- 如何获取正确的值了?
- 监听HomeSwiper中img的加载完成.
- 加载完成后, 发出事件, 在Home.vue中, 获取正确的值.
- 补充:
- 为了不让HomeSwiper多次发出事件,
- 可以使用isLoad的变量进行状态的记录.
- 注意: 这里不进行多次调用和debounce的区别
监听滚动, 动态的改变tabControl的样式
- 问题:动态的改变tabControl的样式时, 会出现两个问题:
- 问题一: 下面的商品内容, 会突然上移
- 问题二: tabControl虽然设置了fixed, 但是也随着Better-Scroll一起滚出去了.
- 其他方案来解决停留问题.
- 在最上面, 多复制了一份PlaceHolderTabControl组件对象, 利用它来实现停留效果.
- 当用户滚动到一定位置时, PlaceHolderTabControl显示出来.
- 当用户滚动没有达到一定位置时, PlaceHolderTabControl隐藏起来.
解决首页中可滚动区域的问题
-
Better-Scroll在决定有多少区域可以滚动时, 是根据scrollerHeight属性决定
- scrollerHeight属性是根据放Better-Scroll的content中的子组件的高度
- 但是我们的首页中, 刚开始在计算scrollerHeight属性时, 是没有将图片计算在内的
- 所以, 计算出来的告诉是错误的(1300+)
- 后来图片加载进来之后有了新的高度, 但是scrollerHeight属性并没有进行更新.
- 所以滚动出现了问题
-
如何解决这个问题了?
- 监听每一张图片是否加载完成, 只要有一张图片加载完成了, 执行一次refresh()
- 如何监听图片加载完成了?
- 原生的js监听图片: img.onload = function() {}
- Vue中监听: @load=‘方法’
- 调用scroll的refresh()
-
如何将GoodsListItem.vue中的事件传入到Home.vue中
- 因为涉及到非父子组件的通信, 所以这里我们选择了事件总线
- bus ->总线
- Vue.prototype.$bus = new Vue()
- this.bus.emit(‘事件名称’, 参数)
- this.bus.on(‘事件名称’, 回调函数(参数))
- 因为涉及到非父子组件的通信, 所以这里我们选择了事件总线
-
问题一: refresh找不到的问题
- 第一: 在Scroll.vue中, 调用this.scroll的方法之前, 判断this.scroll对象是否有值
- 第二: 在mounted生命周期函数中使用 this.$refs.scroll而不是created中
-
问题二: 对于refresh非常频繁的问题, 进行防抖操作
- 防抖debounce/节流throttle(课下研究一下)
- 防抖函数起作用的过程:
- 如果我们直接执行refresh, 那么refresh函数会被执行30次.
- 可以将refresh函数传入到debounce函数中, 生成一个新的函数.
- 之后在调用非常频繁的时候, 就使用新生成的函数.
- 而新生成的函数, 并不会非常频繁的调用, 如果下一次执行来的非常快, 那么会将上一次取消掉
…
中间的详情页、分类页、购物车、我的页就不冗余的描述了,今后若有空会更新完整的
…
在我的GitHub查看完整项目mall
在我的Gitee查看完整项目mall
到此,Vue的学习之路已经完结撒花了,在此,感谢老师coderwhy的悉心教导,为老师点赞!!!!!(另外,若项目接口不能正常使用需要添加老师微信coderwhy003获取)