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

一.功能

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

二、步骤

1.添加输入框

• .wxml代码：

• .wxss代码：

/* 1.输入框样式 */
input {
  border: 1rpx solid blue;
  height: 50px;
  line-height: 50px;
  border-radius: 10px;
}

• 效果图：

2.添加按钮

• .wxlm代码：

  add

• .wxss代码：

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

• 效果图：

3.将内容按序排列输出

• .wxml代码：

  
    {{item}}

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

delete

暂无代办事件

• .js代码：

 // 4.内容删除
  handleDelete(evt){
    console.log("delte",evt.target.dataset.myid)

• 效果图：