小程序实现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.i服务器托管网d === 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>
当你输入任务内容并按下回车键时,任务将被添加到待办事项清单中。
点击任务后面的”完成”按钮,任务将被标记为已完成,并在界面上显示为灰色。
点击任务后面的”删除”按钮,任务将从待办事项清单中删除。
这个示例只是一个简单的待办事项清单应用,你可以根据自己的需求进行扩展和修改。
到这里也就结束了,希望对您有所帮助。
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net