小程序实现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>
到这里也就结束了,希望对您有所帮助。