购物APP项目_首页开发_整理

1.1. 目录结构

• network
• components -> common/content
• pages -> 路由分层
• common
• assets
• router
• store

设置CSS初始化和全局样式

• initialize.css
• base.css

axios的封装

• 创建axios实例
• 拦截响应，返回.data数据
• 根据传入的options发送请求，并且调用对应resolve和reject

---

---

---

首先开发

1， navbar的封装和使用

• 封装navbar包含三个插槽：left、center、right
• 设置navbar相关的样式
• 使用navbar实现首页的导航栏

2，请求首页数据

• 封装请求首页更多数据
• 将banner数据放在banners变量中
• 将recommend数据放在recommends变量中

在home.js中封装getHomeGoods(type, page)
在Home.vue中, 又在methods中getHomeGoods(type)
调用getHomeGoods(‘pop’)/getHomeGoods(‘new’)/getHomeGoods(‘sell’)
page: 动态的获取对应的page
获取到数据: res
this.goods[type].list.push(…res.data.list)
this.goods[type].page += 1

goods: {
pop: page1:/list[30]
new: page1/list[30]
sell: page1/list[30]
}

3，根据Swiper封装HomeSwiper

• 使用Swiper和SwiperItem
• 传入banners进行展示

4，封装FeatureView

• 独立组件封装FeatureView
  • div>a>img

5，封装RecommendView

• 展示一张图片即可

6，封装tabControl

• 基本结构的封装
• 监听点击

• props -> titles
  div>根据titles v-for遍历 div -> span{{title}}
  选中哪一个tab, 哪一个tab的文字颜色变色, 下面border-bottom currentIndex

获取到tabControl的offsetTop

必须知道滚动到多少时, 开始有吸顶效果, 这个时候就需要获取tabControl的offsetTop，但是, 如果直接在mounted中获取tabControl的offsetTop, 那么值是不正确.

• 如何获取正确的值了?
  • 监听HomeSwiper中img的加载完成，加载完成后, 发出事件, 在Home.vue中，获取正确的值.
    • 为了不让HomeSwiper多次发出事件，可以使用isLoad的变量进行状态的记录.
  • 注意: 这里不进行多次调用和debounce的区别

监听滚动, 动态的改变tabControl的样式
问题:动态的改变tabControl的样式时, 会出现两个问题:
问题一: 下面的商品内容, 会突然上移
问题二: tabControl虽然设置了fixed, 但是也随着Better-Scroll一起滚出去了.

• 解决停留问题.
  在最上面, 多复制了一份PlaceHolderTabControl组件对象, 利用它来实现停留效果.
  *当用户滚动到一定位置时, PlaceHolderTabControl显示出来.
  *当用户滚动没有达到一定位置时, PlaceHolderTabControl隐藏起来.

7，请求和保存商品数据

• 定义goodsList变量，用于存储请求到的商品数据
• 根据type和page请求商品数据
• 将商品数据保存起来

8，封装GoodsList和GoodsListItem

• 展示商品列表，封装GoodsList
• 列表中每一个商品，封装GoodsListItem
• 注意CSS属性的设置即可

9，滚动的封装Scroll

• 安装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

滚动问题 （图片加载）

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(‘事件名称’, 回调函数(参数))

10，上拉加载更多

• 通过Scroll监听上拉加载更多。
• 在Home中加载更多的数据。
• 请求数据完成后，调动finishedPullUp

11，返回顶部

• 封装BackTop组件
• 定义一个常量，用于决定在什么数值下显示BackTop组件
• 监听滚动，决定BackTop的显示和隐藏

* isShowBackTop: false
* 监听滚动, 拿到滚动的位置:
  *  如果 -position.y > 1000     那么  -> isShowBackTop: true
  * isShowBackTop = -position.y > 1000

• 监听BackTop的点击，点击时，调用scrollTo返回顶部

* 直接监听back-top的点击, 但是可以直接监听?
  * 不可以, 必须添加修饰.native
* 回到顶部
  * scroll对象, scroll.scrollTo(x, y, time)
  * this.$refs.scroll.scrollTo(0, 0, 500)

12，tabControl的停留

• 重新添加一个tabControl组件（需要设置定位，否则会被盖住）
• 在updated钩子中获取tabControl的offsetTop
• 判断是否滚动超过了offsetTop来决定是否显示新添加的tabControl