动力商城首页（四）：用ChartGPT写一个商品列表无限下拉（真丝滑）

本文介绍了如何使用ChartGPT来实现微信小程序中的商品无限下拉加载功能。提供了一个示例代码，包括JS逻辑和WXML/WXSS样式，展示如何在滚动到底部时加载更多商品数据，以及商品列表的布局和样式。代码示例展示了商品的基本属性如图片、名称和价格等的显示方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言

上一节实现了仿唯品会的商品分类和品牌导航功能，想要学习的可以看上一篇文章。

动力商城首页（三）：仿唯品会的商品分类和品牌导航功能（完美）

本节继续实现我们的动力商城首页的商品无限下拉功能。

大家有没有感觉别人的小程序商品无限下拉式那么多丝滑，自己写的总感觉少了点什么？

小编也在网上找了很多开源的无限下拉功能代码，怎么说呢，一言难尽，很多都是取巧的做法。

这两天小编在想是否能用ChartGPT 写一个呢？说干就干！

二、ChartGPT编写

训练ChartGPT编写代码：

ChartGPT源码：

以下是一个示例的微信小程序原生语言代码，实现商品无限下拉功能，每行展示2个商品，包含所需的商品属性信息：

// 在页面的js文件中

Page({
  data: {
    productList: [], // 商品列表数据
    totalDataCount: 50, // 总共的商品数据条数
    perPageDataCount: 10, // 每次下拉加载的商品数据条数
    currentPage: 1, // 当前页数
  },

  onLoad: function() {
    this.loadMoreData();
  },

  // 模拟从后端获取商品数据
  getProductData: function(startIndex, count) {
    // 这里可以替换成实际的后端接口请求
    // 假设返回的数据是一个数组，包含商品信息对象
    let data = [];
    for (let i = startIndex; i < startIndex + count; i++) {
      let product = {
        image: '商品图片url',
        name: '商品名称',
        originalPrice: 100, // 商品原价
        discountPrice: 80, // 折扣价
        discount: '8折', // 打折信息
        label: '限时抢购', // 商品标签
      };
      data.push(product);
    }
    return data;
  },

  // 加载更多商品数据
  loadMoreData: function() {
    let startIndex = (this.data.currentPage - 1) * this.data.perPageDataCount;
    let newData = this.getProductData(startIndex, this.data.perPageDataCount);
    let productList = this.data.productList.concat(newData);
    this.setData({
      productList: productList,
      currentPage: this.data.currentPage + 1,
    });
  },

  // 下拉触底加载更多数据
  onReachBottom: function() {
    if (this.data.productList.length < this.data.totalDataCount) {
      this.loadMoreData();
    }
  },
});

在页面的wxml文件中，可以按照需要布局商品列表的展示样式，使用wx:for指令遍历productList数据，并展示每个商品的属性信息。

这是一个简单的示例代码，你可以根据实际需求进行修改和扩展。

发现上面的代码没有wxml 和 wxss ，这样就不太好看了。我们继续训练。

我们让GPT继续帮我们编写 wxml 和 wxss 代码。

WXML代码如下：

<view class="container">
  <scroll-view scroll-y="true" bindscrolltolower="loadMoreData">
    <view class="goods-list">
      <block wx:for="{{goodsList}}" wx:key="index">
        <view class="goods-item">
          <image class="goods-image" src="{{item.image}}"></image>
          <view class="goods-info">
            <view class="goods-name">{{item.name}}</view>
            <view class="goods-price">
              <view class="original-price">原价: {{item.originalPrice}}</view>
              <view class="discount-price">折扣价: {{item.discountPrice}}</view>
              <view class="discount-info">打折信息: {{item.discountInfo}}</view>
            </view>
            <view class="goods-label">{{item.label}}</view>
          </view>
        </view>
      </block>
    </view>
  </scroll-view>
</view>

WXSS代码如下：

.container {
  width: 100%;
  height: 100%;
}

.goods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px;
}

.goods-item {
  width: 49%;
  margin-bottom: 10px;
  background-color: #f5f5f5;
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
}

.goods-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 5px;
}

.goods-info {
  margin-top: 10px;
}

.goods-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.goods-price {
  margin-top: 5px;
}

.original-price {
  font-size: 14px;
  color: #999;
}

.discount-price {
  font-size: 16px;
  color: #ff0000;
}

.discount-info {
  font-size: 14px;
  color: #999;
}

.goods-label {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}

这段代码会将商品列表以每行两个的形式展示出来，每个商品包含图片、名称、原价、折扣价、打折信息和标签等属性。滚动到底部时会触发loadMoreData函数加载更多数据。你可以根据实际需求进行样式调整和功能扩展。记得将以上代码复制到你的微信小程序项目中对应的wxml和wxss文件中。