微信小程序实现一个todolist这样的小demo

本文主要是介绍微信小程序实现一个todolist这样的小demo，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

小程序实现todolist

下面是一个简单的待办事项清单应用的示例，它包括添加任务、完成任务和删除任务的功能。

app.json 文件中

{"pages": ["pages/index/index","pages/todoList/todoList"],"window": {"navigationBarTitleText": "Todo List"}
}

创建 pages/todoList/todoList.js 文件

Page({data: {todoList: []},onLoad: function() {this.loadTodoList();},loadTodoList: function() {// 从本地存储中加载待办事项列表const todoList = wx.getStorageSync('todoList');if (todoList) {this.setData({todoList: JSON.parse(todoList)});}},addTodo: function(e) {const value = e.detail.value;if (value) {const todo = {id: new Date().getTime(),content: value,completed: false};const todoList = [...this.data.todoList, todo];this.setData({todoList});wx.setStorageSync('todoList', JSON.stringify(todoList));}},completeTodo: function(e) {const id = e.currentTarget.dataset.id;const todoList = this.data.todoList.map(todo => {if (todo.id === id) {todo.completed = true;}return todo;});this.setData({todoList});wx.setStorageSync('todoList', JSON.stringify(todoList));},deleteTodo: function(e) {const id = e.currentTarget.dataset.id;const todoList = this.data.todoList.filter(todo => todo.id !== id);this.setData({todoList});wx.setStorageSync('todoList', JSON.stringify(todoList));}
})

创建 pages/todoList/todoList.wxml 文件

<view class="container"><view class="header"><text>待办事项：</text><input type="text" bindconfirm="addTodo" placeholder="请输入任务内容" /></view><view class="list"><block wx:for="{{todoList}}"><view class="item {{item.completed ? 'completed' : ''}}"><text>{{item.content}}</text><button bindtap="completeTodo" data-id="{{item.id}}">完成</button><button bindtap="deleteTodo" data-id="{{item.id}}">删除</button></view></block></view>
</view>

当你输入任务内容并按下回车键时，任务将被添加到待办事项清单中。
点击任务后面的"完成"按钮，任务将被标记为已完成，并在界面上显示为灰色。
点击任务后面的"删除"按钮，任务将从待办事项清单中删除。
这个示例只是一个简单的待办事项清单应用，你可以根据自己的需求进行扩展和修改。

到这里也就结束了，希望对您有所帮助。

这篇关于微信小程序实现一个todolist这样的小demo的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---