提示：文章寫完后，目錄可以自動(dòng)生成，如何生成可參考右邊的幫助文檔

---

前言

提示：這里可以添加本文要記錄的大概內(nèi)容：

例如：隨著人工智能的不斷發(fā)展，機(jī)器學(xué)習(xí)這門技術(shù)也越來越重要，很多人都開啟了學(xué)習(xí)機(jī)器學(xué)習(xí)，本文就介紹了機(jī)器學(xué)習(xí)的基礎(chǔ)內(nèi)容。

---

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

6. 商品列表

6.0 創(chuàng)建 goodslist 分支

git checkout -b goodslist

6.1 定義請求參數(shù)對象

• 🌭🌭🌭根據(jù)接口的要求，事先定義一個(gè)請求參數(shù)對象

data() {return {// 請求參數(shù)對象queryObj:{// 查詢關(guān)鍵詞query:'',// 商品分類Idcid:'',// 頁碼值pagenum:1,// 每頁顯示多少條數(shù)據(jù)pagesize:10},//商品列表的數(shù)據(jù)goodsList:[],//總數(shù)量total:0};},

6.2 獲取商品列表數(shù)據(jù)

• 將頁面跳轉(zhuǎn)時(shí)攜帶的參數(shù)，轉(zhuǎn)存到 queryObj 對象中

onLoad(options){this.queryObj.query = options.query || '';this.queryObj.cid = options.cid || '';// 調(diào)用獲取商品列表數(shù)據(jù)的方法this.getGoodsList()
}
methods:{async getGoodsList(){const {data:res} = await uni.$http.get('/api/public/v1/goods/search',this.queryObj);console.log(res)if(res.meta.status !== 200) return uni.$showMsg()this.goodsList = res.message.goods;this.total = res.message.total; }
}

6.3 渲染商品列表結(jié)構(gòu)

<view class="goods-list"><block v-for="(goods,i) in goodsList" :key="i"><view class="goods-item"><!-- 左側(cè)圖片區(qū)域 --><view class="goods-item-left"><image class="goods-pic" :src="goods.goods_small_logo || defaultPic" mode=""></image></view><!-- 商品右側(cè)信息區(qū)域 --><view class="goods-item-right"><!-- 商品標(biāo)題 --><view class="goods-name">{{goods.goods_name}}</view><view class="goods-info-box"><!-- 商品價(jià)格 --><view class="goods-price">￥{{goods.goods_price}}</view></view></view></view></block></view>
.goods-item{display: flex;padding: 10px 5px;border-bottom:1px solid #f0f0f0 ;.goods-item-left{margin-right: 5px;.goods-pic{width: 100px;height:100px;display: block;}}.goods-item-right{display: flex;flex-direction: column;justify-content: space-between;.goods-name{font-size: 13px;}.goods-price{font-size: 16px;color: #c00000;}}
}

6.4 把商品 item 項(xiàng)封裝為自定義組件

• 在 components 目錄上鼠標(biāo)右鍵，選擇 新建組件
• 將 goods_list 頁面中，關(guān)于商品 item 項(xiàng)相關(guān)的 UI 結(jié)構(gòu)、樣式、data 數(shù)據(jù)，封裝到 my-goods 組件中
• 在 goods_list 組件中，循環(huán)渲染 my-goods 組件即可

 // 定義 props 屬性，用來接收外界傳遞到當(dāng)前組件的數(shù)據(jù)props: {// 商品的信息對象goods: {type: Object,defaul: {},},},

在 goods_detail 組件中，循環(huán)渲染 my-goods 組件即可

 <block v-for="(item, i) in goodsList" :key="i"><!-- 為 my-goods 組件動(dòng)態(tài)綁定 goods 屬性的值 --><my-goods :goods="item"></my-goods></block>

6.5 使用過濾器處理價(jià)格

• 🐱?🏍🐱?🏍🐱?🏍在 my-goods 組件中，和 data 節(jié)點(diǎn)平級，聲明 filters 過濾器節(jié)點(diǎn)

filters:{tofixed(num){return Number(num).toFixed(2) }
}

<!-- 商品價(jià)格 --><view class="goods-price">￥{{goods.goods_price | tofixed}}</view>

6.6 上拉加載更多

6.6.1 初步實(shí)現(xiàn)上拉加載更多

• 打開項(xiàng)目根目錄中的 pages.json 配置文件，為 subPackages 分包中的 goods_list 頁面配置上拉觸底的距離

"subPackages":[{"pages":[{"path" : "goods_list/goods_list","style" : {"onReachBottomDistance": 150}}, ] }
]

• 在 goods_list 頁面中，和 methods 節(jié)點(diǎn)平級，聲明 onReachBottom 事件處理函數(shù)，用來監(jiān)聽頁面的上拉觸底行為

onReachBottom(){
// 讓頁碼值自增 +1this.queryObj.pagenum += 1// 重新獲取列表數(shù)據(jù)this.getGoodsList()
}

• 改造 methods 中的 getGoodsList 函數(shù)，當(dāng)列表數(shù)據(jù)請求成功之后，進(jìn)行新舊數(shù)據(jù)的拼接處理

methods:{async getGoodsList(){//...// this.goodsList = res.message.goods;this.goodsList = [...this.goodsList,...res.message.goods] }
}

6.6.2 通過節(jié)流閥防止發(fā)起額外的請求

• 在 data 中定義 isloading 節(jié)流閥

//是否正在請求數(shù)據(jù)isloading:false

• 修改 getGoodsList 方法，在請求數(shù)據(jù)前后，分別打開和關(guān)閉節(jié)流閥

methods:{
//發(fā)起請求const {data:res}  = await uni.$http.get('/api/public/v1/goods/search',this.queryObj)//關(guān)閉this.isloading = false
}

• 在 onReachBottom 觸底事件處理函數(shù)中，根據(jù)節(jié)流閥的狀態(tài)，來決定是否發(fā)起請求

	//觸底事件onReachBottom (){// 判斷是否還有下一頁數(shù)據(jù)if(this.queryObj.pagenum * this.queryObj.pagesize >= this.total){return uni.$showMsg('數(shù)據(jù)加載完畢!')}// 判斷是否正在請求其它數(shù)據(jù)，如果是，則不發(fā)起額外的請求if(this.isloading) returnthis.queryObj.pagenum += 1this.getGoodsList()},

6.7 下拉刷新

• 在 pages.json 配置文件中，為當(dāng)前的 goods_list 頁面單獨(dú)開啟下拉刷新效果

"subPackages":[{"path": "goods_list/goods_list","style": {"onReachBottomDistance": 150,"enablePullDownRefresh": true,"backgroundColor": "#F8F8F8"}},
]

• 監(jiān)聽頁面的 onPullDownRefresh 事件處理函數(shù)

// 下拉刷新的事件
onPullDownRefresh() {// 1. 重置關(guān)鍵數(shù)據(jù)this.queryObj.pagenum = 1this.total = 0this.isloading = falsethis.goodsList = []// 2. 重新發(fā)起請求this.getGoodsList(() => uni.stopPullDownRefresh())
}

• 修改 getGoodsList 函數(shù)，接收 cb 回調(diào)函數(shù)并按需進(jìn)行調(diào)用

// 獲取商品列表數(shù)據(jù)的方法
async getGoodsList(cb){this.isloading = false// 只要數(shù)據(jù)請求完畢，就立即按需調(diào)用 cb 回調(diào)函數(shù)cb && cb()
}

6.8 點(diǎn)擊商品 item 項(xiàng)跳轉(zhuǎn)到詳情頁面

• 將循環(huán)時(shí)的 block 組件修改為 view 組件，并綁定 click 點(diǎn)擊事件處理函數(shù)：

<view class="goods-list"><view v-for="(item, i) in goodsList" :key="i" @click="gotoDetail(item)"><!-- 為 my-goods 組件動(dòng)態(tài)綁定 goods 屬性的值 --><my-goods :goods="item"></my-goods></view>
</view>

• 在 methods 節(jié)點(diǎn)中，定義 gotoDetail 事件處理函數(shù)

//點(diǎn)擊跳轉(zhuǎn)到商品詳情頁面gotoDetail(item){uni.navigateTo({url:'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id})}

6.9 分支的合并與提交

• 將 goodslist 分支進(jìn)行本地提交
  –git add .
  –git commit -m ‘商品列表’

• 將本地goodslist分支提交到遠(yuǎn)端
  –git push -u origin goodslist

• 將本地goodslist分支合并到master
  –git checkout master
  –git merge goodslist

• 本地master推送到遠(yuǎn)端
  –git push