購物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