列表渲染：10 分钟做一个待办清单

当了解了组件，以及如何页面交互，数据驱动，我们现在来做一个列表页面，这在实际开发中非常常见。在微信小程序开发中，列表渲染是一个非常常见的功能。本文将介绍如何使用 wx:for 循环渲染列表，搭配新增和删除功能，快速实现一个简单的待办清单。

目录

  1. 初始化项目
  2. 使用 wx:for 渲染列表
  3. 实现新增待办功能
  4. 实现删除待办功能
  5. 代码与预览效果对比

初始化项目

第一步：创建小程序项目

  1. 打开微信开发者工具，点击“+”号创建一个新项目。
  2. 选择“小程序”，填写项目名称、项目目录和 AppID（若没有 AppID，可以选择无 AppID 体验版）。
  3. 点击“创建”完成项目创建。

第二步：项目结构

pages/
  ├── index/
  │   ├── index.wxml
  │   ├── index.js
  │   ├── index.wxss
  │   ├── index.json
app.js
app.json
app.wxss

使用 wx:for 渲染列表

示例代码

<!-- index.wxml -->
<view class="container">
  <view>
    <input
      type="text"
      placeholder="新增待办事项"
      bindinput="inputChange"
      value="{{newTodo}}"
    />
    <button bindtap="addTodo">添加</button>
  </view>
  <view>
    <text>待办清单：</text>
    <block wx:for="{{todos}}" wx:key="index">
      <view data-index="{{index}}">
        <text>{{item}}</text>
        <button bindtap="removeTodo">删除</button>
      </view>
    </block>
  </view>
</view>

// index.js
Page({
  data: {
    newTodo: "",
    todos: [],
  },
  inputChange: function (event) {
    this.setData({
      newTodo: event.detail.value,
    });
  },
  addTodo: function () {
    if (this.data.newTodo.trim()) {
      this.setData({
        todos: [...this.data.todos, this.data.newTodo],
        newTodo: "",
      });
    }
  },
  removeTodo: function (event) {
    const index = event.currentTarget.dataset.index;
    this.setData({
      todos: this.data.todos.filter((_, i) => i !== index),
    });
  },
});

/* index.wxss */
.container {
  padding: 20px;
}
input {
  margin-bottom: 10px;
  padding: 5px;
  width: 80%;
  border: 1px solid #ccc;
}
button {
  margin-left: 10px;
  padding: 5px 10px;
  background-color: #1aad19;
  color: white;
  border: none;
  border-radius: 5px;
}

实现新增待办功能

代码解释

  1. 在 index.wxml 中，我们创建了一个输入框和一个按钮，用于新增待办事项。
  2. 在 index.js 中，我们定义了 inputChange 方法来更新输入框的值，定义 addTodo 方法来将新待办事项添加到待办清单中。

新增待办功能

  1. 用户在输入框中输入待办事项。
  2. 点击“添加”按钮，待办事项会被添加到 todos 数组中，并重新渲染列表。

实现删除待办功能

代码解释

  1. 在 index.wxml 中，我们在每个待办事项后面添加了一个“删除”按钮。
  2. 在 index.js 中，我们定义了 removeTodo 方法来从 todos 数组中删除对应的待办事项。

删除待办功能

  1. 用户点击某个待办事项后面的“删除”按钮。
  2. 对应的待办事项会被从 todos 数组中移除，并重新渲染列表。

代码与预览效果对比

代码

<!-- index.wxml -->
<view class="container">
  <view>
    <input
      type="text"
      placeholder="新增待办事项"
      bindinput="inputChange"
      value="{{newTodo}}"
    />
    <button bindtap="addTodo">添加</button>
  </view>
  <view>
    <text>待办清单：</text>
    <block wx:for="{{todos}}" wx:key="index">
      <view data-index="{{index}}">
        <text>{{item}}</text>
        <button bindtap="removeTodo">删除</button>
      </view>
    </block>
  </view>
</view>

// index.js
Page({
  data: {
    newTodo: "",
    todos: [],
  },
  inputChange: function (event) {
    this.setData({
      newTodo: event.detail.value,
    });
  },
  addTodo: function () {
    if (this.data.newTodo.trim()) {
      this.setData({
        todos: [...this.data.todos, this.data.newTodo],
        newTodo: "",
      });
    }
  },
  removeTodo: function (event) {
    const index = event.currentTarget.dataset.index;
    this.setData({
      todos: this.data.todos.filter((_, i) => i !== index),
    });
  },
});

/* index.wxss */
.container {
  padding: 20px;
}
input {
  margin-bottom: 10px;
  padding: 5px;
  width: 80%;
  border: 1px solid #ccc;
}
button {
  margin-left: 10px;
  padding: 5px 10px;
  background-color: #1aad19;
  color: white;
  border: none;
  border-radius: 5px;
}

预览效果

  1. 打开微信开发者工具，创建一个新项目并将上述代码粘贴到相应文件中。
  2. 在输入框中输入待办事项，点击“添加”按钮，待办事项会显示在列表中。
  3. 点击某个待办事项后面的“删除”按钮，该待办事项会从列表中移除。

通过以上示例，我们学习了如何使用 wx:for 循环渲染列表，并实现了新增和删除待办事项的功能。希望这篇文章能帮助您更好地理解和应用微信小程序中的列表渲染技术。