微信小程序简版（todolist）实现

Posted 2021-05-18 Lumbago～

简版todolist图片

demo.wxml文件

<!--pages/demo02/demo02.wxml-->
<view class="inp1">
  <!-- 添加数据 -->
  <input type="text" value="{{input}}" bindconfirm="pushinp" placeholder="Anything here..." />
  <view style="margin-top: 20px;">
      <!-- 数据循环渲染 -->
      <view wx:for="{{todos}}" class="tab">
        <!-- 切换图标 -->
        <icon  hidden="{{item.completed}}" bindtap="booleans" data-indexs="{{index}}" class="icon-small icons" type="circle" size="23"></icon>
        <icon  hidden="{{!item.completed}}"  bindtap="booleans" data-indexs="{{index}}" class="icons" type="success" size="23"></icon>
        <!-- 数据 -->
        <view hidden="{{item.showinp}}" style="{{item.completed==true?'text-decoration:line-through':''}}"
        bindtap="inputs" data-indexs="{{index}}" >{{item.name}}</view>
        <!-- 修改数据 -->
        <input hidden="{{!item.showinp}}" bindblur="hideinp" data-indexs="{{index}}" type="text" style="height:25px; width:160px;" value="{{item.name}}" />
        <!-- 点击删除 -->
        <icon bindtap="dels" data-dels="{{index}}" class="icon-small icons" type="cancel" size="23"></icon>
      </view>
  </view>
  <!-- 显示已完成条数 -->
  <view style="margin-top: 20px; font-size:14px;">Toggle all{{num}} items leftClear completed</view>
</view>

demo.js文件

// pages/demo02/demo02.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    input:'',
    todos:[
      {name:'Learing WEAPP',completed:false,showinp:false},
      {name:'Learing javascript',completed:true,showinp:false},
      {name:'Learing html',completed:false,showinp:false}
    ],
    num:2,
  },
  // 添加
  pushinp(e){
    // 获取值
      let val = e.detail.value;
      let obj={
          name:val,
          completed:false,
          showinp:false
      }
      if(val==''){
        console.log('值为空!请输入数据')
        return 
      }
       // push添加数据
      this.data.todos.push(obj);
      // 条数+1
      this.data.num++
      this.setData({
        todos:this.data.todos,
        input: this.data.input,
        num:this.data.num
      })
  },
  // 删除
  dels(q){
    // 获取下标
      let indexs=q.currentTarget.dataset.dels
      // 如果是不选中的情况下条数才-1
      if(!this.data.todos[indexs].completed){
        this.data.num--;
      }
      // 截取删除当前数据
      this.data.todos.splice(indexs,1);
      this.setData({
        todos:this.data.todos,
        num:this.data.num
      })
  },
  // 判断复选框
  booleans(val){
    // 获取下标
        let indexs=val.currentTarget.dataset.indexs
        // 反向赋值
        this.data.todos[indexs].completed=!this.data.todos[indexs].completed;
        // 判断条数增减
        if(this.data.todos[indexs].completed){
          this.data.todos[indexs].showinp=false
          this.data.num--;
        }else{
          this.data.num++;
        }
        this.setData({
          todos:this.data.todos,
          num:this.data.num
        })
  },
  // 显示修改框
  inputs(val){
    // 获取下标
    let indexs=val.currentTarget.dataset.indexs
    // 判断是否修改
    if(this.data.todos[indexs].completed==true){
      console.log('不能修改')
      return 
  }
  // 反向赋值
    this.data.todos[indexs].showinp=!this.data.todos[indexs].showinp
    this.setData({
      todos:this.data.todos
    })
  },
  // 失去焦点
  hideinp(val){
    // 获取当前下标
    let indexs=val.currentTarget.dataset.indexs;
    // 获取当前name值
    let vals=val.detail.value
    // 赋值
    this.data.todos[indexs].name=vals
    // 将input框换成文本
    this.data.todos[indexs].showinp=!this.data.todos[indexs].showinp
    this.setData({
      todos:this.data.todos
    })
  }
})

demo.wxss文件

input{
  border: 1px solid rgb(199, 185, 185);
  width: 260px;
  /* width: calc(); */
  height: 40px;
}
.inp1{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 50px;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
}
.tab{
  width: 220px;
  height:40px;
  border: 1px solid #000;
  line-height: 30px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: -1px;
}
.icons{
  line-height: 30px;
  margin-top: 20px;
  margin-left: 10px;
  margin-right: 10px;
}