文章插圖
第二個問題是：數據刷新完畢不應該再發起數據請求
這里也有一個公式 當前頁×每頁展示數據大于等于總數據的話就說明到頭了不能請求數據了
文章插圖
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，可以拿到你點擊的這個區域的一些信息
文章插圖
推薦閱讀
- 【炫麗】從0開始做一個WPF+Blazor對話小程序
- 小米mixfold屏幕供應商_小米mix fold屏幕是哪家的
- 小米11pro和小米10pro哪個值得買_小米11pro和小米10pro區別對比
- 歐萊雅小蜜罐和復顏抗皺哪個好用_哪個更適合30歲的女人
- vivox70pro+和小米11的區別_哪款更值得買
- 航海王熱小隊決戰活動玩法詳解攻略
- 小米11pro支持無線充電嗎_小米11pro電池容量多少
- 成語故事大全 短小成語故事大全100篇
- applewatchseries7可以微信支付嗎_applewatch微信支付怎么用
- 華為P50Pro和小米12Pro拍照哪款好-對比評測