局部滚动无限加载

发布于 2024-06-18  139 次阅读


<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, "获取列表");
    },

只会写bug的bugming