微信小程序--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)

• 效果图：