创建一个简易的微信小程序待办清单,并写出代码
时间: 2024-10-24 14:07:39 浏览: 22
dart-todo:最愚蠢的待办事项清单。 在Dart
创建一个简易的微信小程序待办事项清单,可以使用`wepy`框架编写。以下是一个基础的示例,它包含了增删改查的功能:
```javascript
// pages/todoList/todoList.wpy
Page({
data: {
todos: [], // 待办事项列表
newItem: '' // 新待办事项文本
},
addTodo: function(e) { // 添加任务
if (this.data.newItem.trim()) {
this.setData({
todos: [...this.data.todos, { text: this.data.newItem, done: false }],
newItem: ''
});
}
},
toggleTodo: function(item) { // 切换完成状态
let index = this.data.todos.indexOf(item);
if (index !== -1) {
this.setData({
todos: [
...this.data.todos.slice(0, index),
{ ...item, done: !item.done },
...this.data.todos.slice(index + 1)
]
});
}
},
deleteTodo: function(item) { // 删除任务
let index = this.data.todos.indexOf(item);
if (index !== -1) {
this.setData({
todos: this.data.todos.filter((_, i) => i !== index)
});
}
},
clearTodos: function() { // 清空所有任务
this.setData({ todos: [] });
},
})
// 页面结构模板
<view class="container">
<view class="header">待办事项</view>
<view class="todo-list">
<view wx:for="{{todos}}" wx:key="*this">
<view class="todo-item" bindtap="toggleTodo">
{{ item.text }} ({{ item.done ? '已完成' : '未完成' }})
<button class="delete-btn" bindtap="deleteTodo">{{ item.text }}</button>
</view>
</wx:for>
<input class="new-todo-input" value="{{ newItem }}" placeholder="添加新任务" bindinput="addTodo"/>
</view>
<view class="footer">
<button bindtap="clearTodos">清空所有</button>
</view>
</view>
```
这只是一个基本的骨架,实际的小程序需要配合WXML、WXSS文件以及相应的样式和交互设计。微信小程序的具体语法和API可能会有些许变化,你需要查看官方文档进行学习。
阅读全文