微信小程序实战教程之列表页面静态实现，一文让你不再为列表页面苦恼

前端

2023-11-30 13:17:04

创建丰富的列表页面：微信小程序中的列表页面教程

在微信小程序开发中，列表页面是一种常见的元素，用于展示各种数据，例如文章列表、商品列表或好友列表。本教程将指导您制作静态列表页面、动态列表页面和无限列表页面，涵盖从创建页面到监听用户操作和处理数据请求的各个方面。

静态列表页面

静态列表页面包含固定不变的数据，非常适合展示不经常更新的信息。

创建新页面： 在微信开发者工具中创建一个名为 "list" 的新页面。
添加控件： 在页面中添加控件，例如 view、text 和 image，用于构建页头和列表主体。
设置控件属性： 调整控件属性，例如背景色、字体大小和图片来源。
添加数据： 将数据直接添加到页面的 JSON 文件中，或通过 wx.request 接口从服务器获取。

动态列表页面

动态列表页面允许数据随着用户操作而变化，适合展示频繁更新的数据。

创建数据模型： 定义一个数据模型来存储列表数据，可以是数组或对象。
绑定数据： 使用 wx.setData 将数据模型绑定到控件。
监听用户操作： 使用 wx.on 监听用户操作，并在发生操作时更新数据模型。

无限列表

无限列表允许用户不断加载更多数据，用于展示大量数据。

使用分页： 使用分页将数据分成多页，每次加载一页。
处理请求等待： 使用 wx.showLoading 和 wx.hideLoading 在数据请求期间显示和关闭加载提示。

代码示例

以下是创建静态列表页面的代码示例：

Page({
  data: {
    items: [
      { title: 'Item 1', description: 'Description for Item 1' },
      { title: 'Item 2', description: 'Description for Item 2' },
      { title: 'Item 3', description: 'Description for Item 3' },
    ]
  }
});

以下是创建无限列表页面的代码示例：

Page({
  data: {
    page: 1,
    pageSize: 10,
    loading: false,
    items: [],
  },

  onLoad() {
    this.loadData();
  },

  onReachBottom() {
    this.loadData();
  },

  loadData() {
    this.setData({ loading: true });
    wx.request({
      url: 'https://example.com/api/list',
      data: {
        page: this.data.page,
        pageSize: this.data.pageSize,
      },
      success: (res) => {
        this.setData({
          items: this.data.items.concat(res.data.items),
          page: this.data.page + 1,
          loading: false,
        });
      },
    });
  },
});