微信小程序 todolist

微信小程序todolist 的变种

文章目录

• 前言
• 一、效果图
• 二、代码
  • 1.wxml
  • 2.wxss
  • 3.js

---

前言

微信小程序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')
        })
    },

})