微信小程序：做出一个简单的ToDoList

1.todos.wxml

<view class="container">
<view class="search">
<image src="../../images/and.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>

2.todos.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.forEach(function(item){
  //    if(!item.completed){
  //      todos.push(item)
  var todos=this.data.todos.filter(function(item){
    return !item.completed
  })
  this.setData({
    todos:todos
  })
     }
   })

3.todos.wxss

.container{
  border-top: 1rpx solid #e0e0e0;
}
.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;
}

4.todos.json

{
  "usingComponents": {}
}