一.功能
- 输入待办事件
- 添加代办事件
- 删除代办事件
二、步骤
1.添加输入框
-
.wxml代码：
<!-- 1.输入框 --> <input type="text" bindinput="handleInput" value="{{text}}" /> -
.wxss代码：
/* 1.输入框样式 */
input {
border: 1rpx solid blue;
height: 50px;
line-height: 50px;
border-radius: 10px;
} -
效果图：
2.添加按钮
-
.wxlm代码：
<button size="mini" bind:tap="handleAdd">add</button> -
.wxss代码：
/* #将输入框和按钮放置到一行样式 */
.box{
display: flex;
flex-direction: row;
} -
效果图：
3.将内容按序排列输出
-
.wxml代码：
<view wx:if="{{datalist.length>0 }}"> <view wx:for="{{datalist}}" wx:key="index" class="list"> <text>{{item}}</text> </view > -
.js代码：
// 3.提取出输入内容
handleInput(evt){
console.log("input",evt.detail.value)
this.setData({
text:evt.detail.value
})
},handleAdd(){ console.log(this.data.text) this.setData({ datalist:[...this.data.datalist,this.data.text], text:"" }) }, -
.wxss代码：
/* 3.list排列 */
.list{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.list text{
width: 200px;
} -
效果图：
4.增加删减功能
-
.wxml代码：
<button size="mini" bind:tap="handleDelete" data-myid="{{index}}">delete</button>
<view wx:else="">暂无代办事件</view>
-
.js代码：
// 4.内容删除
handleDelete(evt){
console.log("delte",evt.target.dataset.myid) -
效果图：
