微信小程序todo案例
<view class="container">
<view class="addsentence">
<image src="../../image/icon/plusitem.png" bindtap="addToListBtn"></image>
<input type="text" placeholder="请输入..." value="{{input}}" bindinput="inputToList"/>
</view>
</view>
<view class="box">
<view wx:for="{{list}}" wx:key="superindex" class="one">
<view class="onedot"></view>
<view wx:if="{{index!=list.length-1}}" class="oneline"></view>
<view class="onemain">
<view class="onemaintime"> {{item.title}}</view>
<view class="oneunderline"></view>
<view class="onemaintodo">
<view wx:for="{{item.todo}}" wx:for-item="todo" wx:key="todoindex" class="todo">
<icon type="{{todo.completed?'success':'circle'}}" size="16"/>
<text>{{todo.name}}</text>
</view>
</view>
<view class="onemainprogress">{{item.progress}}</view>
</view>
</view>
</view
Page({
/**
* 页面的初始数据
*/
data: {
input:' ',
list:[{
title:"2022/7/8",//之后要自动填充
todo:[{
name:"捡垃圾",
completed:false
},{
name:"吃午饭",
completed:false
},{
name:"修照片",
completed:true
}],
progress:"完成度:90%"
}
]
},
inputToList(e){
//传输入框值
console.log(e.detail.value);
this.setData({
input: e.detail.value
});
},
addToListBtn(){
//+号功能
console.log(this.data.input)
var todos= this.data.list.todo;
list.todo.push({
name: this.data.input,
completed: false
})
this.setData({
todos: list.todo
});
},
.container {
border-top: 1rpx solid #cdcdcd;
padding: 20rpx;
}
.addsentence {
margin: 0 auto;
display: flex;
align-items: center;
width: 90vw;
margin: 10rpx;
padding: 20rpx;
border: 1px solid #cdcdcd;
border-radius: 14rpx;
box-sizing: border-box;
}
.addsentence input {
flex: 1;
height: 40rpx;
}
.addsentence image {
width: 40rpx;
height: 40rpx;
margin-right: 20rpx;
}
.box {
padding: 30rpx;
}
.one {
position: relative;
padding-bottom: 40rpx;
}
.onedot {
left: 5rpx;
width: 25rpx;
height: 25rpx;
position: absolute;
background-color: #36678f;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
.oneline {
position: absolute;
left: 15rpx;
height: 100%;
border-left: 2px solid #e4e7ed;
}
.onemain {
position: relative;
padding-left: 45rpx;
top: -5rpx;
}
.onemaintime {
margin-bottom: 16rpx;
padding-top: 8rpx;
color: #525252;
line-height: 0.95;
font-size: 27rpx;
}
.onemaincon {
font-size: 32rpx;
color: #112714;
}
.onemaintodo {
font-size: 32rpx;
margin: 3rpx;
color: #112714;
}
.onemaintodo .todo {
display: flex;
align-items: center;
padding: 10rpx;
}
.todo text {
flex: 1;
margin-left: 15rpx;
color: #112714;
}
.onemainprogress {
margin-bottom: -28rpx;
padding-top: 8rpx;
color: #999;
line-height: 1;
font-size: 21rpx;
}
无法添加新待办事项
无法添加新待办事项
还想问问自动填充时间至title以及完成度的计算方式
效果:
index.js
Page({
/**
* 页面的初始数据
*/
data: {
input: ' ',
list: [{
title: "2022/7/8",//之后要自动填充
todo: [{
name: "捡垃圾",
completed: false
}, {
name: "吃午饭",
completed: false
}, {
name: "修照片",
completed: true
}],
progress: "完成度:90%"
}
]
},
inputToList(e) {
//传输入框值
console.log(e.detail.value);
this.setData({
input: e.detail.value
});
},
addToListBtn() {
//+号功能
console.log(this.data.input)
// 由于list是个数组
// 先要搜索当前插入的下标索引
var todayIdx = this.data.list.findIndex(item => item.title === this.getDateStr())
if (todayIdx > -1) {
var todos = this.data.list[todayIdx].todo;
todos.push({
name: this.data.input,
completed: false
})
// 刷新数组
this.setData({
[`list[${todayIdx}].todo`]: todos
});
}
else {
// 刷新数组
this.setData({
[`list[${this.data.list.length}]`]: {
title: this.getDateStr(),
todo: [
{
name: this.data.input,
completed: false
}
]
}
});
}
},
checkTodo(e) {
const { index, todoindex } = e.currentTarget.dataset;
this.setData({
[`list[${index}].todo[${todoindex}].completed`]: !this.data.list[index].todo[todoindex].completed
})
},
// 获取当前日期字符串
getDateStr(d) {
if (!d) d = new Date();
let year = d.getFullYear();
let month = d.getMonth() + 1;
let day = d.getDate();
return `${year}/${month}/${day}`
}
})
index.wxml
<wxs module="tools">
module.exports.getProgress = function (todo) {
console.log(todo);
var length = todo.length; // 总量
var checked = 0;
for (var i = 0; i < todo.length; i++) {
if (todo[i].completed) {
checked++;
}
}
return '完成度:' + (checked / length * 100).toFixed(2) + '%'
}
</wxs>
<view class="container">
<view class="addsentence">
<image src="../../image/icon/plusitem.png" bindtap="addToListBtn"></image>
<input type="text" placeholder="请输入..." value="{{input}}" bindinput="inputToList" />
</view>
</view>
<view class="box">
<view wx:for="{{list}}" wx:key="superindex" class="one">
<view class="onedot"></view>
<view wx:if="{{index!=list.length-1}}" class="oneline"></view>
<view class="onemain">
<view class="onemaintime"> {{item.title}}</view>
<view class="oneunderline"></view>
<view class="onemaintodo">
<!-- 增加点击事件 -->
<view wx:for="{{item.todo}}" wx:for-item="todo" wx:for-index="todoIndex" wx:key="todoIndex" class="todo" bindtap="checkTodo" data-todoindex="{{todoIndex}}" data-index="{{index}}">
<icon type="{{todo.completed?'success':'circle'}}" size="16" />
<text>{{todo.name}}</text>
</view>
</view>
<view class="onemainprogress">{{tools.getProgress(item.todo)}}</view>
</view>
</view>
</view>
由于样式没改所以就不沾了.
addToListBtn里取值不对