微信小程序--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代码：

  <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)

• 效果图：