关于微信小程序todos练习的相关实现

63 阅读 0 评论 42 点赞

我是靠谱客的博主娇气香氛，最近开发中收集的这篇文章主要介绍关于微信小程序todos练习的相关实现，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

对于我这么个新人小白来说，真的，难住我的绝对是写逻辑，真的是一个弱项，一切还是要从最基本的学起，所以我下面就罗列了几个关于todos的逻辑（微信小程序）。

注意：可能场景会千变万化，但这种逻辑还是很值得去琢磨，一开始屁都写不出来，可能就是积累少了。。。

1.对于todos列表，是有一个complete属性，为布尔值，先不多说，这里实现的是当点击某处时，complete为true的会被移除，为非的会被保留下来
clearCompletedHandle:function(){
var todos=this.data.todos
var remains= []
for(var i=0;i<todos.length-1;i++){
todos[i].completed || remains.push(todos[i])
}
this.setData({todos:remains})
}

2.当点击列表的某一行时，对应的complete属性发生改变，因为这个属性关系到页面当前行的一些样式，比如：点击后radio显示绿色，再点击取消
toggleTodoHandle: function(e){
var index= e.currentTarget.dataset.index
var todos= this.data.todos
todos[index].completed=!todos[index].completed
this.setData({
todos:todos,
leftCourt: this.data.leftCourt - (todos[index].completed ? 1 : 0)
})
}

3.点击某一行中的删除按钮时，删除
removeTodoHandle: function(e){
var index=e.currentTarget.dataset.index
var todos=this.data.todos
var remove=todos.splice(index,1)
this.setData({
todos: todos,
leftCourt: this.data.leftCourt -(remove.completed ? 0 : 1 )
})
this.save()
}

4.点击全选按钮，allComplete是data定义的一个属性，同时也是牵涉到complete的变化
toggleAllHandle:function(){
this.data.allComplete = !this.data.allComplete
for(var i=todos.length-1;i>=0;i–){
todos[i].completed = this.data.allComplete
}
this.setData({
todos: todos
})