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

Posted 2023-02-09 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 allnum 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;