小程序样例1：简单待办列表

基本功能：

显示所有待办列表（点击不同的文本进行显示）

没完成的待办

已完成的待办

新建待办test

清除待办foo

代码js文件：

//index.js
//获取应用实例
const app = getApp();
Page({
  data: {
    todo: '',
    todos: [
      {
        "id": 1474894720002,
        "todo": "foo",
        "completed": false
      },
      {
        "id": 1474894720922,
        "todo": "bar",
        "completed": true
      },
      {
        "id": 1474894723594,
        "todo": "baz",
        "completed": false
      }
    ],
    filterTodos: [],
    filter: 'all',
    activeCount: 0,
  },
  bindTodoInput(e) {
    this.setData({
      todo: e.detail.value
    });
  },
  saveTodo(e) {
    if (this.data.todo.trim().length === 0) {
      return;
    }

    const newTodo = {
      id: new Date().getTime(),
      todo: this.data.todo,
      completed: false,
    };
    
    this.setData({
      todo: '',
      todos: this.data.todos.concat(newTodo),
      filterTodos: this.data.filterTodos.concat(newTodo), 
      activeCount: this.data.activeCount + 1,
    });
  },

  todoFilter(filter, todos) {
    return filter === 'all' ? todos
      : todos.filter(x => x.completed === (filter !== 'active'));
  },
  toggleTodo(e) {
    const { todoId } = e.currentTarget.dataset;
    const { filter, activeCount } = this.data;
    let { todos } = this.data;
    let completed = false;
    todos = todos.map(todo => {
      if (Number(todoId) === todo.id) {
        todo.completed = !todo.completed;
        completed = todo.completed;
      }
      return todo;
    });
    const filterTodos = this.todoFilter(filter, todos);
    this.setData({
      todos,
      filterTodos,
      activeCount: completed ? activeCount - 1 : activeCount + 1,
    });
  },
  useFilter(e) {
    const { filter } = e.currentTarget.dataset;
    const { todos } = this.data;
    const filterTodos = this.todoFilter(filter, todos);
    this.setData({
      filter,
      filterTodos,
    });
  },
  clearCompleted() {
    const { filter } = this.data;
    let { todos } = this.data;
    todos = todos.filter(x => !x.completed);
    this.setData({
      todos,
      filterTodos: this.todoFilter(filter, todos),
    });
  },
  todoDel(e) {
    const { todoId } = e.currentTarget.dataset;
    const { filter, activeCount } = this.data;
    let { todos } = this.data;
    const todo = todos.find(x => Number(todoId) === x.id);
    todos = todos.filter(x => Number(todoId) !== x.id);
    this.setData({
      todos,
      filterTodos: this.todoFilter(filter, todos),
      activeCount: todo.completed ? activeCount : activeCount - 1,
    });
  },
  onLoad() {
    console.log('onLoad');
    const that = this;
    const activeCount = this.data.todos
          .map(x => x.completed ? 0 : 1)
          .reduce((a, b) => a + b, 0);
    that.setData({
      activeCount,
      filterTodos: this.data.todos
    });
  }
});

wxml：

  
    
    →
  
  
  
    {{activeCount}} 个待办
    
      所有
      待办
      已完成
    
    清除完成项
    
  
  
    
      
      {{item.todo}}
      
    
  

wxss:

/**index.wxss**/
.todo {
  margin: 20rpx;
  display: flex;
  align-items: center;
  background: #F5F5F5;
  height: 70rpx;
}

.new-todo {
  border: none;
  font-style: italic;
  width: 100%;
}

.new-todo-save {
  font-size: 28rpx
}

.todo-list {
  margin: 20rpx;
  display: flex;
  flex-direction: column;
  flex-grow: 2;
}

.todo-item {
  display: flex;
  height: 80rpx;
  position: relative;
}

.todo-check {
  margin-top: -6rpx;
}

.todo-del {
  margin-top: -6rpx;
  position: absolute;
  right: 20rpx;
}

.todo-content {
  margin-left: 20rpx;
}

.todo-completed {
  color: #d9d9d9;
  text-decoration: line-through;
}

.todo-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  font-size: 24rpx;
}

.filter {
  display: flex;
  flex-direction: row;
}

.filter-item {
  margin-left: 10rpx;
  padding: 6rpx 14rpx;
}

.filter-active {
  border: 1px solid;
  border-color: rgba(175, 47, 47, 0.2);
}

.clear-empty {
  width: 120rpx;
  height: 24rpx;
}