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