最终效果
思维导图
数据类型
定义一个数组
todo:[{value:"起床",checked:true},
{value:"吃早饭",checked:true},
{value:"睡觉",checked:false},
{value:"吃午饭",checked:false},
]
其中的value值表示计划，checked表示是否被勾选上。
第一步——实现输入框，添加数据
<view class="add-list">
<!-- 使用变量的保存 -->
<input type="text" auto-focus placeholder="你想要做什么？" bindinput="bindKeyInput" />
<button class="btn" bindtap="add">添加</button>
</view>
使用 bindinput 用来监听每次输入的值，然后通过 e.detail.value ，来获取到输入的值，然后将值赋给todolist_one (这个用来保存每一个次输入的值)
bindKeyInput(e){
this.setData ({
todolist_one:e.detail.value
})
//console.log(e.detail.value)
},
当点击添加的时候，触发 add 函数，将输入的文本，放到数组中
add(e){
var todo = this.data.todo
// 定义一条新输入,未勾选
var one = {value:'',checked:false}
// 不为空的时候才可以添加
if(this.data.todolist_one !== ''){
one.value = this.data.todolist_one
todo.unshift(one) //添加想要的字段
this.setData({
todolist_one:'', //将之前的清除
todo:todo
})
}
console.log(this.data.todo)
},
这样子的话，就完成了，输入的数据的添加了
通过 wx:for 来将数据展示出来，其中 item.value 表示每次要做的事情， item.checked 表示每次是否被勾选上
<view>
<!-- 使用for循环遍历数组 -->
<checkbox-group bindchange="mark">
<view class="add-list" wx:for="{{todo}}" value="{{todolist_one}}" wx:key="{{item.value}}">
<checkbox value="{{item.value}}" checked="{{item.checked}}"></checkbox>
<view wx:if="{{item.checked == true}}" style="text-decoration:line-through;color:blue;float:left">{{item.value}}</view>
<view wx:else>{{item.value}}</view>
<!-- 通过data-index来传递参数 -->
<button class="btn" bindtap="delete" data-index="{{index}}">删除</button>
</view>
</checkbox-group>
</view>
第二步——实现删除数据
这里的话，需要将对应的数组的下标数，给函数接收，这里的话，使用了 data-index 用来传递参数，函数可以通过 e.currentTarget.dataset.index 来获取到对应的下标，获取到后，通过数组的操作进行删除即可。
<button class="btn" bindtap="delete" data-index="{{index}}">删除</button>
delete(e){
// 接收对应数组数目的参数
var index = e.currentTarget.dataset.index
var todo = this.data.todo
// 对数组进行操作,删除对应的list
todo.splice(index,1)
// console.log(todolist)
this.setData({
todo:todo
})
// console.log(e.currentTarget.dataset.index)
},
第三步——实现划掉数据
<checkbox value="{{index}}" checked="{{item.checked}}"></checkbox>
<view wx:if="{{item.checked == true}}" style="text-decoration:line-through;color:blue;float:left">{{item.value}}</view>
<view wx:else>{{item.value}}</view>
这里的话，当点击打勾的时候，会将打勾的index，下标返回给 e.detail.value
mark(e){
// 查看选择标记
console.log('checkbox发生change事件，携带value值为：', e.detail.value)
const todo = this.data.todo //选择的值
const index = e.detail.value //选中的值
// todo[index].checked = !todo[index].checked
var len = index['length']
// console.log(index['length'])
// 将所有的checked清零
for(var i = 0; i < todo.length;i++){
todo[i].checked = false
}
console.log(todo)
// 将选中的标上一
for(var i = 0;i < len;i++){
todo[index[i]].checked = true
}
console.log(todo)
this.setData({
todo
})
},
wxml 代码：
<!--index.wxml-->
<view class="container">
<view class="add-list">
<!-- 使用变量的保存 -->
<input type="text" auto-focus placeholder="你想要做什么？" value="{{todolist_one}}" bindinput="bindKeyInput" />
<button class="btn" bindtap="add">添加</button>
</view>
<view>
<!-- 使用for循环遍历数组 -->
<checkbox-group bindchange="mark">
<view class="add-list" wx:for="{{todo}}" wx:key="{{item.value}}">
<checkbox value="{{index}}" checked="{{item.checked}}"></checkbox>
<view wx:if="{{item.checked == true}}" style="text-decoration:line-through;color:blue;float:left">{{item.value}}</view>
<view wx:else>{{item.value}}</view>
<!-- 通过data-index来传递参数 -->
<button class="btn" bindtap="delete" data-index="{{index}}">删除</button>
</view>
</checkbox-group>
</view>
</view>
js代码
// pages/todolist/todolist.js
Page({
/**
* 页面的初始数据
*/
data: {
todolist_one:"",
todolist:["11232","2",3,4,5],
choose:[1,2,3,4,5],
todo:[{value:"起床",checked:true},
{value:"吃早饭",checked:true},
{value:"睡觉",checked:false},
{value:"吃午饭",checked:false},
]
},
bindKeyInput(e){
this.setData ({
todolist_one:e.detail.value
})
//console.log(e.detail.value)
},
add(e){
var todo = this.data.todo
var one = {value:'',checked:false}
// 不为空的时候才可以添加
if(this.data.todolist_one !== ''){
one.value = this.data.todolist_one
todo.unshift(one) //添加想要的字段
this.setData({
todolist_one:'', //将之前的清除
todo:todo
})
}
console.log(this.data.todo)
},
delete(e){
// 接收对应数组数目的参数
var index = e.currentTarget.dataset.index
var todo = this.data.todo
// 对数组进行操作,删除对应的list
todo.splice(index,1)
// console.log(todolist)
this.setData({
todo:todo
})
// console.log(e.currentTarget.dataset.index)
},
mark(e){
// 查看选择标记
console.log('checkbox发生change事件，携带value值为：', e.detail.value)
const todo = this.data.todo //选择的值
const index = e.detail.value //选中的值
// todo[index].checked = !todo[index].checked
var len = index['length']
// console.log(index['length'])
// 将所有的checked清零
for(var i = 0; i < todo.length;i++){
todo[i].checked = false
}
console.log(todo)
// 将选中的标上一
for(var i = 0;i < len;i++){
todo[index[i]].checked = true
}
console.log(todo)
this.setData({
todo
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
})
wxss代码
/* pages/todolist/todolist.wxss */
.container{
margin-top: 30rpx;
margin-left: 30rpx;
border-radius: 5px;
background-color: white;
width: 100%;
padding-bottom: 1rpx;
}
.add-list{
width: 100%;
display: flex;
float: left;
outline-color: rgb(230, 230, 230);
}
.btn{
margin-right: 30rpx;
display: flex;
float: right;
background-color: gold;
}
学前端，从ToDolist开始
写的不错，感觉学到了很多~
不错，挺详细的，UI上可以做更好的优化
写的很细致，学习到了~
不错，很详细
清晰👍
社区大佬真多 我算是学到了
很好