小程序的添加方式
给input框一个bindconfirm事件(bindconfirm=“addTask”)在js中定义一个数组
和文本内容的属性,将定义好的事件在page中引入通过bindconfirm事件后的命名中写事件例(addTask) ,addTask(e){}中的e是触发的事件会弹出一下内容例:
currentTarget: {id: "", offsetLeft: 155, offsetTop: 9, dataset: {…}}
detail: {value: ""}
mark: {}
mut: false
target: {id: "", offsetLeft: 155, offsetTop: 9, dataset: {…}}
timeStamp: 163290
type: "confirm"
_userTap: false
__proto__: Object
datail中的value就是输入框中的内容,将定义好的内容通过this.setData({})添加进在data中定义好的数组再在想要渲染的地方进行渲染数组就可以
总方式例如todolist中的事件:
这是wxml的文件
<view class="my-header">
<text>ToDoList</text>
<input type="text" value="{{task}}" bindconfirm="addtask" placeholder="请输入ToDo"/>
</view>
<view>
<view>
<view class="top-list">
<view class="top-ing" > <text>正在进行</text> <text>{{workNum}}</text> </view>
<view class="list" wx:for="{{tesk}}" wx:key="id" hidden="{{item.check}}">
<view >
<checkbox bindtap="changeCheck" data-i="{{index}}" checked="{{item.check}}"></checkbox>
<text>{{item.task}}</text>
</view>
<text>-</text>
</view>
这是js中的内容
Page({
/**
* 页面的初始数据---存放数据和数据变化的数组和事件名
*/
data: {
tesk:[],
task:"",
workNum:0,
finishNum:0
},
/**
* 点击完成时进行添加输入框中的内容
*/
addtask(e){
console.log(e);
let obj={
task:e.detail.value,
check:false,
isExit:false,
id: new Date().getTime()
}
/**
* 将修改好的数据添加进tesk中
*/
this.setData({
task:"",
tesk:[...this.data.tesk,obj]
}),
this.changeNum()
},
}
小程序的删除
在删除按钮中定义一个bindtap事件例如:bindtap=“del”,并且定义一个下标或者id因为要将想要删除的删除所以需要下标和id例如:data-i=“index”(data-id=“{{item.id}}”)在page中进行接收删除事件名例del将del事件名的事件通过e来确定所删除的事件是否成功触发,并将id和下标引进del中再进行点击是否能获取想要的下标或id再将想要的id和下标命名例如:let id=e.currentTarget.dataset.id
(或 let i=e.currentTarget.dataset.i)来接收再通过this.setData({})中的数组进行删除例如:
// 删除任务的逻辑
del(e) {
let id = e.currentTarget.dataset.id
// let i = e.currentTarget.dataset.i
// console.log(e);
// 使用过滤器留下不需要删除的数据
this.setData({
tasks: this.data.tasks.filter(item => item.id != id)
})
// 直接删除想要删除的数据
// this.setData({
// tasks: this.data.tasks.splice(i, 1)
// })
this.changeNum()
},