微信小程序-单页面完成增、删、全选、计数、清除功能

 业务逻辑：

• 1、添加：输入框中有数据，点击手机“完成”按钮或者“+”均可添加一条新数据
• 2、选择：点击列表的某一项，checkbox勾选或空；
• 3、删除：点击某一项后面的“x”，删除该项
• 4、全选：点击“Toggle all”文字全选，再次点击，全部选
• 5、未完成量：剩余几项未完成，取决于列表中没有打勾的项数，受影响的操作包括1、2、3、4
• 6、清除完成：清除已完成的项，即删除打勾的项

todos.wxml

<view class="container">

    <!-- 1、search -->
    <view class="search">
        <image src="../../assets/plus.png" bindtap="addTodos"></image>
        <input type="text" 
            placeholder="Anything here..."
            bindinput="inputChangeHandle"
            bindconfirm="addTodos"
            value="{{input}}"
        ></input>
    </view>

    <!-- 2、todos -->
    <block wx:if="{{todos.length}}">
        <view class="todos">
            <view class="item {{item.completed?'active':''}}" 
                wx:for="{{todos}}" 
                wx:key="{{index}}" 
                bindtap="toggle"
                data-index="{{index}}"
            >
                <icon type="{{item.completed?'success':'circle'}}"></icon>
                <text>{{item.name}}</text>
                <icon type="clear" size="15" catchtap="remove" data-index="{{index}}"></icon>
            </view>
        </view>

        <!-- 3、options -->
        <view class="footer">
            <text bindtap="toggleAll">Toggle all</text>
            <text wx:if="{{leftCount}}">{{leftCount}} {{leftCount>1?'items':'item'}} left</text>
            <text bindtap="clear">Clear completed</text>
        </view>
    </block>

    <view wx:else>nothing</view>
</view>

todos.wxss

.container {
  border-top: 1rpx solid #e0e0e0;
  background: #fff;
}
.search{
    border: 1rpx solid #e0e0e0;
    border-radius: 5rpx;
    box-shadow: 0 0 5rpx #e0e0e0;
    margin: 20rpx;
    padding: 20rpx;
    display: flex;
    align-items: center;
}
.search image{
    width: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;
}
.todos{
    border: 1rpx solid #e0e0e0;
    border-radius: 5rpx;
    box-shadow: 0 0 5rpx #e0e0e0;
    margin: 20rpx;
}
.todos .item{
    padding: 20rpx;
    border-bottom:  1rpx solid #e0e0e0;
    display: flex;
    align-items: center;
}
.todos .item:last-child{
    border-bottom:0;
}
.todos .item text{
    flex:1;
    margin-left: 20rpx;
}
.todos .item.active text{
   text-decoration: line-through;
   color: #ccc;
}
.footer{
    margin: 20rpx;
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
    font-size: 32rpx;
}

todos.js

Page({
  data: {
    input: '',    // 文本框的数据模型
    todos: [{
        name: 'Learning VUE',
        completed: false
      },
      {
        name: 'Learning JS',
        completed: true
      },
      {
        name: 'Learning HTML',
        completed: true
      }
    ],
    leftCount: 0,//未完成数
    allCompleted: false //全选标志
  },
  // 0 加载时判断一下allCompleted的值，并重置leftCount
  onLoad() {
    let items=this.data.todos.filter((item)=>{
      return !item.completed
    })
    let allCompleted = items.length > 0 ? false : true
    let leftCount = items.length
    this.setData({
      allCompleted: allCompleted,
      leftCount: leftCount
    })
  },
  // 1 input值绑定
  inputChangeHandle: function(e) {
    this.setData({
      input: e.detail.value
    })
  },
  // 2. 按钮点击时执行一段代码
  addTodoHandle: function() {
    if (!this.data.input) return
    let item = {
      name: this.data.input,
      completed: false
    }
    let leftCount = this.data.leftCount + 1
    this.data.todos.push(item)
    this.setData({
      todos: this.data.todos,
      input: '',
      leftCount: leftCount
    })
  },
  // 3 删除
  removeTodoHandle(e) {
    let index = e.currentTarget.dataset.index
    let delitem = this.data.todos.splice(index, 1)[0]
    let leftCount = this.data.leftCount + (delitem.completed ? 0 : -1)
    this.setData({
      todos: this.data.todos,
      leftCount: leftCount
    })
  },
  // 4 点击勾选与否
  toggleTodoHandle(e) {
    let index = e.currentTarget.dataset.index
    let item = this.data.todos[index]
    item.completed = !item.completed
    let leftCount = this.data.leftCount + (item.completed ? -1 : 1)
    this.setData({
      todos: this.data.todos,
      leftCount: leftCount
    })
  },
  // 5 toggle all 切换操作
  toggleAllHandle() {
    let allCompleted = !this.data.allCompleted
    let todos = this.data.todos
    todos.forEach(function(item) {
      item.completed = allCompleted
    })
    let leftCount = allCompleted ? 0 : todos.length
    this.setData({
      todos: todos,
      allCompleted: allCompleted,
      leftCount: leftCount
    })

  },
  // 6 Clear completed
  clearHandle() {
    let items = this.data.todos.filter(function(item) {
      return item.completed != true
    })
    this.setData({
      todos: items,
    })

  }
})