<div v-if="!showChange" class="goodsOneBox" @scroll="handleScroll">
<div class="goodsListBox" v-for="(item, index) in goodsList" :key="index">
<div class="goodsImg">
<img :src="firstImageUrl(item.imageUrls)" alt="" />
<div class="collectImg" @click="clickCollect(item)">
<!-- <img
src="../../assets/collectIcon.png"
v-if="!item.collected"
alt=""
/> -->
<img src="../../assets/collectIcon_ac.png" alt="" />
</div>
</div>
<div class="rightGoodsDescBox">
<div class="title">{{ item.name }}</div>
<div class="numBox">
<div>{{ item.providerName }}</div>
<div>销量:{{ item.salesVolume }}</div>
</div>
<div class="priceBox">
<div>{{ item.orderPrice }} / {{ item.retailUnit }}</div>
<div @click="addShopCarPop(item)">
<img src="../../assets/goodsAdd.png" alt="" />
</div>
</div>
</div>
</div>
</div>
//数据
goodsList:[]
// 滚动加载
handleScroll(event) {
const scrollContainer = event.target;
const { scrollTop, clientHeight, scrollHeight } = event.target;
// console.log(scrollTop, clientHeight, scrollHeight);
if (
scrollTop + clientHeight === scrollHeight &&
this.goodsList.length < this.total
) {
// alert('滚动到底部啦')
console.log("滚动到底部啦");
this.isLoading = true;
this.currentPage++;
}
// 计算是否滚动到底部
if (
scrollContainer.scrollTop + scrollContainer.clientHeight >=
scrollContainer.scrollHeight - 10 &&
this.goodsList.length < this.total &&
this.isLoading == false
) {
console.log("底部请求数据");
this.isLoading = true;
this.currentPage++;
this.getStoreProduct(); // 自己的请求
}
},
// 获取列表
async getStoreProduct() {
this.isLoading = true;
const data = {
pageSize: this.pageSize,
pageNum: this.currentPage,
orderByColumn: this.sortCurrent,
isAsc: this.isAsc,
categoryId: this.categoryId,
providerId: this.providerIdCurrent,
purchasesLevel: this.purchasesLevelCurrent,
productName: this.shopKey,
};
const res = await storeProduct(data);
this.goodsList = [...this.goodsList, ...res.records];
this.total = res.total ?? 0;
this.isLoading = false;
console.log(res, "获取列表");
},
Comments | NOTHING