小程序之todo-list
todo-list总页面
wxml代码：
<!--pages/toList/todoList.wxml-->
<view style="text-align: center; font-size: larger;">
<text>待办事项</text>
</view>
<view class="todolist">
<view class="saveBox">
<!-- 简易的双向数据绑定 -->
<input type="text" model:value="{
{value}}" />
<button size="mini" type="primary" bindtap="save">添加</button>
</view>
<view class="getBox">
未完成
<view class="checkbox" wx:for="{
{inputList}}" wx:key="id">
<view class="content">
<view class="{
{item.checked?'del':''}}">
<checkbox checked="{
{item.checked}}" bindtap="changeFlag" data-index="{
{index}}" />{
{
index+1}}----{
{
item.saveName}}
</view>
<button size="mini" type="warn" bindtap="delete" data-index="{
{index}}">删除</button>
</view>
</view>
已完成
<view class="checkbox" wx:for="{
{inputFinList}}" wx:key="id">
<view class="content">
<view class="{
{item.checked?'del':''}}">
<checkbox checked="{
{item.checked}}" bindtap="changeFinFlag" data-index="{
{index}}" />{
{
index+1}}----{
{
item.saveName}}
</view>
<!-- <button size="mini" type="warn" bindtap="delete" data-index="{
{index}}" >删除</button> -->
</view>
</view>
</view>
</view>
wxss代码：
/* pages/toList/todoList.wxss */
.todolist{
width: 100vw;
}
.saveBox{
display: flex;
}
.saveBox>input{
border: 2px solid blue;
height: 30px;
width: 80%;
}
.getBox{
width: 100vw;
height: 60%;
border: 2px solid #dadada;
}
.content{
height: 40px;
border: 1px solid #dadada;
display: flex;
}
.del{
text-decoration: line-through;
}
js代码：
// pages/toList/todoList.js
Page({
/**
* 页面的初始数据
*/
data: {
value:'',
inputList:[
{
id:1,
saveName:'吃饭',
checked:false
},
{
id:2,
saveName:'打游戏',
checked:false
},
{
id:3,
saveName:'敲代码',
checked:false
}
],
inputFinList:[]
},
// 添加
save(){
console.log(this.data.value);
let obj={
id:this.data.inputList[this.data.inputList.length-1]?.id+1||1,
saveName:this.data.value
}
if(this.data.value!=''){
this.data.inputList.push(obj)
console.log(this.data.inputList);
this.setData({
inputList:this.data.inputList,
value:''
})
}
wx.setStorageSync('inputList', this.data.inputList)
},
// 未完成
changeFlag(e) {
console.log( e.currentTarget.dataset.index);
let index = e.currentTarget.dataset.index
this.data.inputList[index].checked = !this.data.inputList[index].checked
this.data.inputFinList.push(this.data.inputList[index])
this.data.inputList.splice(index,1)
this.setData({
inputList:this.data.inputList,
inputFinList:this.data.inputFinList
})
wx.setStorageSync('inputList', this.data.inputList)
wx.setStorageSync('inputFinList', this.data.inputFinList)
},
// 已完成
changeFinFlag(e){
console.log( e.currentTarget.dataset.index);
let index = e.currentTarget.dataset.index
this.data.inputFinList[index].checked = !this.data.inputFinList[index].checked
// 先push
this.data.inputList.push(this.data.inputFinList[index])
// 再删
this.data.inputFinList.splice(index,1)
this.setData({
inputList:this.data.inputList,
inputFinList:this.data.inputFinList
})
wx.setStorageSync('inputList', this.data.inputList)
wx.setStorageSync('inputFinList', this.data.inputFinList)
},
// 删除
delete(e){
console.log(e);
let index = e.currentTarget.dataset.index
this.data.inputList.splice(index,1)
// this.data.inputFinList.splice(index,1)
this.setData({
inputList:this.data.inputList,
})
wx.setStorageSync('inputList', this.data.inputList)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.setData({
inputList:wx.getStorageSync('inputList')|| this.data.inputList,
inputFinList:wx.getStorageSync('inputFinList')||[]
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})