微信小程序--31(todolist案例)

一.功能

• 输入待办事件
• 添加代办事件
• 删除代办事件

二、步骤

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代码：

<!-- 2.搜索按钮 --><button size="mini" bind:tap="handleAdd">add</button>

• .wxss代码：

/* #将输入框和按钮放置到一行样式 */
.box{display: flex;flex-direction: row;
}

• 效果图：

3.将内容按序排列输出

• .wxml代码：

<!-- 3.内容排序输出 -->
<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代码：

<!-- 4.增加删减功能 -->
<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)

• 效果图：