微信小程序todolist 的变种
前言
微信小程序todolist 的变种
一、效果图
二、代码
1.wxml
代码如下:
<view class="todoPage">
<view class="inputBox">
<view class="iconBox">+</view>
<!-- add键盘回车事件 -->
<input type="text" placeholder="请输入..." model:value="{{name}}" bindconfirm="add" />
</view>
<view class="contentBox">
<!-- 渲染list数据 -->
<view class="singleBox" wx:for="{{list}}" wx:key="index">
<view class="nameBox">
<!-- 单个事件的勾选 传下标 -->
<checkbox bindtap="ass" data-index="{{index}}" checked="{{item.checked}}"></checkbox>
<view class="{{item.checked?'s':''}}">{{item.name}}</view>
</view>
<!-- 单个删除 id是传下标 -->
<icon class="icon-small" type="cancel" bindtap="del" id="{{index}}" size="23"></icon>
</view>
</view>
<view class="footerBox">
<!-- 全选反选 -->
<checkbox bindtap="checkAll" checked="{{isCheckAll}}">全选</checkbox>
<!-- 显示未完成的数量 -->
<view>{{Num}}未完成 事件</view>
<!-- 多个删除 删除完成事件 -->
<view bindtap="dels">清空完成事件</view>
</view>
</view>
2.wxss
代码如下:
/* pages/aaaa/aaaa.wxss */
.todoPage{
width: 100%;
box-sizing: border-box;
padding: 0 20rpx;
}
.inputBox{
margin: 20rpx 0;
display: flex;
align-items: center;
border: 1rpx solid #ccc;
border-radius: 10rpx;
height: 90rpx;
box-sizing: border-box;
padding: 0 20rpx;
}
.inputBox>.iconBox{
font-size: 60rpx;
color: #ccc;
margin-right: 20rpx;
}
.contentBox{
border: 1rpx solid #ccc;
overflow: hidden;
border-radius: 10rpx;
}
.singleBox{
display: flex;
box-sizing: border-box;
height: 90rpx;
align-items: center;
justify-content: space-between;
padding: 0 20rpx;
border-bottom: 1rpx solid #ccc;
}
.nameBox{
display: flex;
}
.footerBox{
display: flex;
margin-top: 30rpx;
justify-content: space-between;
align-items: center;
height: 100rpx;
}
.s{
text-decoration: line-through;
}
2.js
// pages/aaaa/aaaa.js
Page({
/**
* 页面的初始数据
*/
data: {
list:[], //定义一个空数组
name:'', //输入的内容
Num:0, // 完成的数量
isCheckAll: false // 默认不全选
},
add(e){
//正则验证 不能是空格 内容长度不能大于10 不可以输入特殊符号
let valueReg = /^[\u4e00-\u9fa5a-zA-Z\d]{1,10}$/
if (!valueReg.test(this.data.name)){
wx.showToast({
title: '内容不符合规范',
icon:"none"
})
return;
}
this.data.list.push({name:this.data.name,checked:false})
this.setData({ //视图刷新
list:this.data.list,
name:''
})
//调用函数 计算未完成的数量 和存到本地
this.getNum()
},
//计算未完成的数量 和存到本地
getNum(){
this.setData({ //视图刷新
Num: this.data.list.filter(item=> !item.checked).length
})
wx.setStorageSync('admin', this.data.list)
},
//单个任务的勾选事件
ass(e){
//获取当前下标
console.log(e.currentTarget.dataset.index);
//将 e.currentTarget.dataset.index 赋给 i i就是当前下标
let i = e.currentTarget.dataset.index
this.setData({//视图刷新
//进行反选
[`list[${i}].checked`]:!this.data.list[i].checked,
})
this.setData({//视图刷新
//this.data.list.checked 全部勾选 全选高亮
isCheckAll:this.data.list.every(item=>item.checked)
})
//调用函数 计算未完成的数量 和存到本地
this.getNum()
},
//单个删除
del(e){
//获取下标 进行删除
let i = e.currentTarget.id
if(this.data.list[i].checked){ //if判断 为true 不删除 为false删除
return
}
//删除的i下标 1删除的数量
this.data.list.splice(i,1)
this.setData({//视图刷新
list:this.data.list
})
//调用函数 计算未完成的数量 和存到本地
this.getNum()
},
//全选
checkAll(){
this.setData({//视图刷新
//反选 若果this.data.isCheckAll为true 反选为 false
//反选 若果this.data.isCheckAll为false 反选为 true
isCheckAll: !this.data.isCheckAll
})
//forEach循环
this.data.list.forEach(item=>{
//将this.data.isCheckAll的值赋给this.data.list.checked
item.checked = this.data.isCheckAll
})
this.setData({//视图刷新
list:this.data.list
})
//调用函数 计算未完成的数量 和存到本地
this.getNum()
},
//清空完成事件
dels(){
this.setData({//视图刷新
//将this.data.list.checked 为false筛选出来
list:this.data.list.filter(item=> !item.checked),
isCheckAll:false
})
//调用函数 计算未完成的数量 和存到本地
this.getNum()
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
//获取本地数据
this.setData({
list:wx.getStorageSync('admin')
})
},
})