一.商品列表

1.1 獲取數據

首先能夠進入商品列表的途徑

傳的數據有

瞭解了這個之後就可以開始了，先創建分支

創建編譯模式，並分配初試數據

這個時候就可以獲取數據了

需要的數據

所以在發起請求之前需要整理一下數據，先定義數據

整理數據發起請求

1.2 渲染頁面

註意我們可以去定義一個預設的圖片在data，如果當前這個圖片沒有就為預設圖片

1.3 item封裝自定義組件

創建組件

新建插件

然後將我們的結構複製過來，樣式也複製過來

然後就是組件利用方面，既然封裝的是item組件，就要提現item組件的復用性，所以item這個組件必然是在父組件裡面被vfor的

所以遍歷應該在父組件這邊就完成，那麼給子組件得到的數據就是每一個具體的goods，就可以先去改造子組件了

記得將預設圖片也放在子組件

父組件的改造

然後子組件這邊要接受

註意props的簡寫形式，直接在後面為一個數組

1.4 過濾器處理價格

回顧一下vue的過濾器

首先關鍵字filters

然後裡面是一個函數形式，靠的是返回值，傳進來的參數是等會要用的地方的插值語法的參數

用的時候通過一個管道符連接，前面的值就相當於參數

1.5 上拉載入更多

首先修改我們的下拉觸底的距離

註意，在uniapp裡面沒有單獨的json文件，所以所有的頁面的json修改都在同體的pages.json裡面，對應的下麵有一個對象這個就是他單獨的json配置

然後在這個分包的下拉觸底事件來操作

下拉刷新一次，就將頁碼加一頁，同時請求數據裡面也要改造一下，賦值我們的列表數據，需要 進行一個擴展運算符的融合

然後解決兩個下拉觸底經典問題

第一個是節流閥的問題，不能托底過快導致請求好幾次數據

聲明一個節流閥

為什麼放在下麵表示數據請求完畢了才讓他為fasle的，因為這是await，所以只有返回成功了才會進入下一步

然後下拉觸底事件判斷

為true就出去，因為為true表示正在請求數據

第二個問題是：數據刷新完畢不應該再發起數據請求

這裡也有一個公式 當前頁×每頁展示數據大於等於總數據的話就說明到頭了不能請求數據了

1.6 上拉刷新

首先還是先開啟上拉刷新

然後在上拉刷新事件做處理

然後有一個很關鍵的步驟重新獲取數據，我會傳一個回調，來關閉下拉刷新效果

記住這種形式，用短路運算來判斷有無回調，有就執行，沒得就不執行

1.6.1 存在問題 上拉刷新回調無效

1.7 跳轉商品詳情頁面

將block組件改為view組件，綁定click事件

二.商品詳情

首先創建分支並創建編譯模式

然後發起請求

一樣的data定義數據，onload發起函數調用，methods定義請求函數

然後數據賦值

2.1 輪播圖效果

定義輪播圖結構

然後實現輪播圖預覽效果

用到uni的一個api previewImage，需要當前照片的索引，第二個參數是一個數組，裡面每一項為照片的url地址

返回一個新數組，並且返回的值為每一張big照片

2.2 商品信息區

定義ui結構，並渲染

2.3 商品詳情頁

這裡由於伺服器返回的是直接帶html標簽的一串文本，所以這類要用到小程式專門用來解析html字元串的組件富文本rich-text

裡面有一個nodes屬性為字元串即可

問題1：

中間會有空隙

其根本原因還是因為 img標簽為行內塊的原因，這裡應該把img都變成block

採用的方法是replace來替換

註意前面如果要加g/i等參數表示是這個

問題2：

價格在刷新一瞬間為undefined的問題

直接條件渲染即可

2.4 商品導航區

有現成的組件，通過 uni-goods-nav這個組件來使用

首先需要定義數據

options表示左邊的按鈕區域，buttongroup表示右邊的區域

然後他的組件寫上來

將其固定定位，並記得整個父盒子有個padding-bottom

關於他的點擊事件

click表示左邊的區域點擊事件，buttonclick表示右邊的區域點擊事件

裡面接受一個形參e，可以拿到你點擊的這個區域的一些信息