一.商品列表1.1 獲取數據首先能夠進入商品列表的途徑
文章插圖
文章插圖
文章插圖
傳的數據有
文章插圖
文章插圖
文章插圖
了解了這個之后就可以開始了，先創建分支
創建編譯模式 ， 并分配初試數據
文章插圖
這個時候就可以獲取數據了
需要的數據
文章插圖
所以在發起請求之前需要整理一下數據，先定義數據
文章插圖
整理數據發起請求
文章插圖
1.2 渲染頁面注意我們可以去定義一個默認的圖片在data ， 如果當前這個圖片沒有就為默認圖片
文章插圖
文章插圖
1.3 item封裝自定義組件創建組件
文章插圖
新建插件
【uniapp/微信小程序 項目day03】
文章插圖
然后將我們的結構復制過來，樣式也復制過來
文章插圖
然后就是組件利用方面 ， 既然封裝的是item組件，就要提現item組件的復用性，所以item這個組件必然是在父組件里面被vfor的
所以遍歷應該在父組件這邊就完成，那么給子組件得到的數據就是每一個具體的goods，就可以先去改造子組件了
記得將默認圖片也放在子組件
文章插圖
父組件的改造
文章插圖
然后子組件這邊要接受
文章插圖
注意props的簡寫形式，直接在后面為一個數組
文章插圖
1.4 過濾器處理價格回顧一下vue的過濾器
首先關鍵字filters
然后里面是一個函數形式 ， 靠的是返回值，傳進來的參數是等會要用的地方的插值語法的參數
文章插圖
用的時候通過一個管道符連接，前面的值就相當于參數
文章插圖
1.5 上拉加載更多首先修改我們的下拉觸底的距離
注意，在uniapp里面沒有單獨的json文件，所以所有的頁面的json修改都在同體的pages.json里面，對應的下面有一個對象這個就是他單獨的json配置
文章插圖
文章插圖
然后在這個分包的下拉觸底事件來操作
下拉刷新一次，就將頁碼加一頁，同時請求數據里面也要改造一下 ， 賦值我們的列表數據，需要 進行一個擴展運算符的融合
文章插圖
然后解決兩個下拉觸底經典問題
第一個是節流閥的問題，不能托底過快導致請求好幾次數據
聲明一個節流閥
文章插圖
為什么放在下面表示數據請求完畢了才讓他為fasle的，因為這是await ， 所以只有返回成功了才會進入下一步
文章插圖
然后下拉觸底事件判斷
為true就出去，因為為true表示正在請求數據
推薦閱讀
- 【炫麗】從0開始做一個WPF+Blazor對話小程序
- 小米mixfold屏幕供應商_小米mix fold屏幕是哪家的
- 小米11pro和小米10pro哪個值得買_小米11pro和小米10pro區別對比
- 歐萊雅小蜜罐和復顏抗皺哪個好用_哪個更適合30歲的女人
- vivox70pro+和小米11的區別_哪款更值得買
- 航海王熱小隊決戰活動玩法詳解攻略
- 小米11pro支持無線充電嗎_小米11pro電池容量多少
- 成語故事大全 短小成語故事大全100篇
- applewatchseries7可以微信支付嗎_applewatch微信支付怎么用
- 華為P50Pro和小米12Pro拍照哪款好-對比評測