小程序的添加删除

小程序的添加方式

给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()
},
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值