微信小程序todolist

---

文章目录

前言

一个小程序小白

---

代码部分

代码如下：wxml

<view class="header">
	<input type="text" value="{{val}}" bindconfirm="add" name="" id="" />
</view>
<view class="top">
	<view class="zhengzai">正在进行<text>{{num1}}</text></view>
	<view class="nav" wx:for="{{list}}" hidden="{{item.chec}}">
		<checkbox bindtap="change" data-index="{{index}}" checked="{{item.chec}}"></checkbox><text>{{item.name}}</text><text class="right" bindtap="del" data-i="{{index}}">—</text>
	</view>
</view>
<view class="top">
	<view class="zhengzai">已经完成<text>{{num2}}</text></view>
	<view class="nav" wx:for="{{list}}" hidden="{{!item.chec}}">
		<checkbox bindtap="change" data-index="{{index}}" checked="{{item.chec}}"></checkbox><text>{{item.name}}</text><text class="right" bindtap="del" data-i="{{index}}">—</text>
	</view>
</view>

代码如下（示例）：wxss以及js

.header {
	width: 100%;
	line-height: 70rpx;
}

.top {
	font-weight: 900;
}

input {
	width: 50%;
	margin: 0 auto;
	border: 1px solid black;
}

.zhengzai {
	display: flex;
	justify-content: space-between;
	margin: 20rpx;
	font-size: 26px;
	font-weight: 900;
}

.nav {
	margin: 15rpx;
}

.right {
	display: inline-block;
	float: right;
	width: 50rpx;
	text-align: center;
	height: 50rpx;
	background-color: brown;
	border-radius: 50%;
}

Page({
	data: {
		val: '', //input框的内容
		num1: 0, //正在进行的长度
		num2: 0, //已经完成的长度
		list: wx.getStorageSync('list') || [], //把存储在store中的数据拿过来如果没有就是一个数组
	},
	count() { //自定义一个方法判断长度
		//let的两个变量接收数据
		let n1 = 0
		let n2 = 0
		this.data.list.forEach(item => { //将拿到的数据循环遍历
			if (item.chec === false) { //判断复选框是否选中
				n1 += 1 //没有选中的
			} else {
				n2 += 1 //选中的
			}
		});
		this.setData({ //更新视图
			//赋值
			num1: n1,
			num2: n2
		})
	},
	add(e) { //添加
		console.log(e);
		//let 一个数据判断
		let flag=false
		let val = e.detail.value
		if(val==''){//判空
			wx.showToast({
				title: '不能为空',
			})
			flag=true
		}
		this.data.list.forEach(item => {//判重
			if (item.name === val) {
				wx.showToast({
					title: '已经有这个事件了',
				})
			flag=true
			}
		})
		if(flag!=true){
		//如果满足条件就添加
			let obj = {
				chec: false, //复选的属性值
				name: val //输入的数据
			}
			console.log(obj);
			this.data.list.push(obj) //将输入的数据添加到数组中
		}
		this.setData({ //更新视图
			list: this.data.list,
			val: '' //input框为空
		})
		this.count()//调用计数的方法重新计算
		wx.setStorageSync('list', this.data.list)//添加到store中
	},
	del(e) {//删除
		console.log(e);
		let i = e.currentTarget.dataset.i//获取下标
		console.log(i);

		this.data.list.splice(i, 1)//删除一个
		this.setData({//更新视图
			list: this.data.list
		})
		this.count()//调用计数的方法重新计算
		wx.setStorageSync('list', this.data.list)//添加到store中

	},
	change(e) {
		let i = e.currentTarget.dataset.index//获取下标
		this.data.list[i].chec = !this.data.list[i].chec//切换数据
		this.setData({//更新视图
			list: this.data.list
		})
		this.count()//调用计数的方法重新计算
		console.log(this.data.list);//添加到store中
	},
	onLoad: function (options) {
		this.count()//开始加载时就开始计数

	}
})

---

总结

这个案例用到了数组的添加与删除，小程序数据双向绑定以及dom的显示与隐藏