wxml：
<view class="header">
<image src="../../img/2.png" class="plus" bindtap="createTodoItem"></image>
<input class="input" name="input" maxlength="140" value="{{inputValue}}" placeholder=" " bindinput="changeInputValue"/>
</view>
<block wx:if="{{todos.length}}">
<view class="todo">
<view wx:for="{{todos}}" class="item" wx:key="{{index}}" bindtap="toggleTodoItem" data-index="{{index}}">
<icon class ="icon1" type="{{item.completed ? 'success':'circle'}}" />
<text class="itemName{{item.completed ? ' itemCompleted':''}}">{{item.name}}</text>
<icon class ="icon2" type="clear" catchtap="removeTodoItem" data-index="{{index}}" />
</view>
</view>
js
let _createTodoItem = (todos,name) => {
todos.push({
name,
completed:false
});
return todos;
}
let _toggleTodoItem=(todos,index)=> {
todos[index].completed = !todos[index].completed
return todos;
}
let _removeTodoItem=(todos,index)=> {
todos.splice(index,1);
return todos;
}
let _calculateTodoCount=(todos)=> {
return todos.filter((todo)=>!todo.completed).length;
}
Page({
/**
* 页面的初始数据
*/
data: {
inputValue:'',
todoCount:3,
todos:[
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
changeInputValue:function(e){
console.log(e.detail.value);
this.setData({
inputValue:e.detail.value
});
},
createTodoItem:function(){
this.setData({
todos: _createTodoItem(this.data.todos,this.data.inputValue),
inputValue:'',
todoCount:_calculateTodoCount(this.data.todos)
});
},
toggleTodoItem:function(e){
console.log(e.currentTarget.dataset.index);
this.setData({
todos: _toggleTodoItem(this.data.todos, e.currentTarget.dataset.index),
todoCount: _calculateTodoCount(this.data.todos)
})
},
removeTodoItem:function(e){
this.setData({
todos: _removeTodoItem(this.data.todos, e.currentTarget.dataset.index),
todoCount: _calculateTodoCount(this.data.todos)
})
},
})
