一.商品串列
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，可以拿到你點擊的這個區域的一些資訊
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/529983.html
標籤：其他
上一篇：Vue Router
下一篇：事件委托和排他思想