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

水深无声 2022-11-11 13:08 282阅读 0赞

## 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": { }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjM0MDIwMw_size_16_color_FFFFFF_t_70]

![成果演示][20210320110025571.gif]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjM0MDIwMw_size_16_color_FFFFFF_t_70]: /images/20221022/c8bfc6b1504b4dba81a97a3936f441f6.png
[20210320110025571.gif]: /images/20221022/0c88ef44078243c4a237224ed5e87b2b.png