微信小程序（简易版todolist）

效果如下:

todo.wxml

<view class="container">
    <view class="search">
        <image src="../../img/home.png" bindtap="addtodoshadle"></image>
        <input type="text" placeholder="Anything here……" value="{{input}}" bindinput="inputchangehadle"
            bindconfirm="addtodoshadle" />
    </view>

    <block wx:if="{{todos.length}}">
        <view class="todos">
            <view class="item{{item.completed?' completed':''}}" wx:for="{{todos}}" wx:key="index" bindtap="togglehadle"
                data-index="{{index}}">
                <icon type="{{item.completed?'success':'circle'}}"></icon>
                
                <text>{{item.name}}</text>
                <icon type="clear" size="20px" catchtap="removehadle" data-index="{{index}}"></icon>
            </view>
        </view>

        <view class="footer">
            <text bindtap="toggleAllHadle">Toggle all</text>
            <text wx:if="{{leftcount}}"> {{leftcount}} {{leftcount>1? 'items':'item'}} left</text>
            <text bindtap="clearHadle">Clear Completed</text>
        </view>
    </block>
    <view wx:else class="tip">There is nothing to do...</view>
</view>

todo.js

// pages/todos/todos.js
Page({
  data: {
    input:"",
    todos:[
      {name:"Learning HTML",completed:true},
      {name:"Learning CSS",completed:false},
      {name:"Learning JavaScript",completed:false}
    ],
    leftcount:2,
    allcompleted:false
  },
  inputchangehadle:function(e){
    this.setData({
      input:e.detail.value
    })
  },

  addtodoshadle:function(){
    if(!this.data.input) return

    var todos=this.data.todos
    todos.push({
      name:this.data.input,
      completed:false
    })

    this.setData({
      todos:todos,
      input:'',
      leftcount:this.data.leftcount+1
    })
  },

  togglehadle:function(e){
    var item=this.data.todos[e.currentTarget.dataset.index]
    item.completed=!item.completed
    var leftcount = this.data.leftcount+ (item.completed ?-1:1)
    this.setData({
     todos:this.data.todos,
     leftcount:leftcount
    })
  },

  removehadle:function(e){
    var todos=this.data.todos
    var item=todos.splice(e.currentTarget.dataset.index,1)[0]
    var leftcount = this.data.leftcount+ (item.completed? 0:-1)
    this.setData({
     todos:todos,
     leftcount:leftcount
    })
  },

  toggleAllHadle:function(){
    this.data.allcompleted=!this.data.allcompleted
    var todos=this.data.todos
    var that=this
    
    todos.forEach(function(item){
      item.completed=that.data.allcompleted
    })
    var leftcount = this.data.allcompleted?0:this.data.todos.length
    this.setData({
      todos:todos,
      leftcount:leftcount
    })
  },
  clearHadle:function(){
    var todos=this.data.todos.filter(function(item){
      return !item.completed
    })

    this.setData({
      todos:todos
    })
  }
})

todo.wxss

.search{
  display: flex;
  margin:20rpx;
  padding:20rpx;
  align-items: center;
  border: solid 1rpx #e0e0e0;
  border-radius: 5rpx;
  box-shadow: 0 0 20rpx #e0e0e0;
}
.search image{
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}
.todos{
  margin:20rpx;
  border: solid 1rpx #e0e0e0;
  border-radius: 5rpx;
  box-shadow: 0 0 20rpx #e0e0e0;
}
.todos .item{
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: solid 1rpx #e0e0e0;
}
.todos .item:last-child{
  border-bottom: 0;
}
.todos .item text{
 flex: 1;
 margin-left: 20rpx;
 font-size: 35rpx;
 color: #444;
}
.todos .item.completed text{
  color: #888;
  text-decoration-line: line-through;
 }
.footer{
  display: flex;
  justify-content: space-around;
  margin: 20rpx;
  font-size: 30rpx;
  color:#666;
}
.tip{
  color: #777;
  margin: 30rpx;
}