// app.js
App({
onLaunch: function () {
// 初始化代码
}
})
// pages/index/index.js
Page({
data: {
todoList: [],
newTodo: ''
},
// 输入新的待办事项
onNewTodoInput: function(event) {
this.setData({
newTodo: event.detail.value
});
},
// 添加待办事项
addTodo: function() {
const { newTodo, todoList } = this.data;
if (!newTodo.trim()) {
wx.showToast({
title: '请输入待办事项',
icon: 'none'
});
return;
}
const updatedTodoList = [...todoList, newTodo];
this.setData({
todoList: updatedTodoList,
newTodo: ''
});
},
// 删除待办事项
deleteTodo: function(event) {
const index = event.currentTarget.dataset.index;
const updatedTodoList = this.data.todoList.filter((_, i) => i !== index);
this.setData({
todoList: updatedTodoList
});
}
});
// pages/index/index.wxml
<view>
<input placeholder="输入待办事项" bindinput="onNewTodoInput" value="{{newTodo}}" />
<button bindtap="addTodo">添加</button>
<view>
<text>待办事项列表:</text>
<view wx:for="{{todoList}}" wx:key="index">
<view class="todo-item">
<text>{{item}}</text>
<button data-index="{{index}}" bindtap="deleteTodo">删除</button>
</view>
</view>
</view>
</view>
// pages/index/index.wxss
/* 样式文件 */
.todo-item {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ccc;
}
input {
margin-bottom: 10px;
}
button {
background-color: #007aff;
color: white;
padding: 5px;
border: none;
border-radius: 5px;
}