微信小程序实现ToDoList

微信小程序实现ToDoList

小程序差不多告一段落了，今天给大家展示如何用微信小程序实现todolist。

一：wxml 页面

<view class="todolist_container">
  <view class="top">
    <view class="top_left">
      <text>ToDoList</text>
    </view>
    <view class="top_right">
      <input type="text" placeholder="添加ToDo" class="input_class" bindinput="inputValue" bindconfirm="addToDo" data-value="inputValue" />
    </view>
  </view>
  <view class="middle">
    <view class="pendding_container">
      <text class="font_status">正在进行  {{list.length}}</text>
      <view>
        <view wx:for="{{ list }}" class="pendding_box" wx:key="{{index}}">
          <view>
            <checkbox color="default" class="checkbox_style" bindtap="ToFinished" data-val="{{item.status}}" data-index="{{index}}"></checkbox>
          </view>
          <view>
            {{item.inputValue.value}}</view>
          <view>
            <button size="mini" type="default"  bindtap="del" data-index="{{index}}">删除</button>

          </view>
        </view>


      </view>
    </view>
    <view class="finished_container">
      <text class="font_status">已经完成  {{finishedList.length}}</text>
      <view class="finished_box" wx:for="{{finishedList}}" wx:key="{{index}}">
         <view>
            <checkbox color="default" class="checkbox_style" bindtap="ToPendding" data-val="{{item.status}}" data-index="{{index}}" checked="{{item.status}}"></checkbox>
          </view>
          <view>
            {{item.inputValue.value}}</view>
          <view>
            <button size="mini" type="default" bindtap="del" data-index="{{index}}">删除</button>

          </view>
      </view>
    </view>
  </view>

</view>

二：wxss 页面

.todolist_container {
  width: 100%;
  height: 550px;
  background-color: pink;
}

.top {
  width: 100%;
  height: 40px;
  background-color: #323232;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.top_left {
  width: 30%;
  height: 40px;
  color: white;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top_right {
  width: 70%;
  height: 30px;
  border: 1px solid gray;
  text-indent: 20px;
  border-radius: 20px;
  background-color: white;
}
.middle{
  width: 100%;
  height: 510px;
  background-color: #CDCDCD;

}
.pendding_container{
  width: 100%;
  /* height: 200px; */
  
}
.finished_container{
  width: 100%;
  /* height: 200px; */
  
}
.font_status{
  font-size: 22px
}
.pendding_box{
  width: 100%;
  height: 35px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: white;

  
}
.input_checkbox{
  width: 20%;
 border: 1px solid gray;
}
.checkbox_style{
  background: gray;
}
.finished_box{
    width: 100%;
  height: 35px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: white;
}

三：js 页面

//logs.js
const util = require('../../utils/util.js')

Page({
  data: {

    list: [],
    finishedList: [],
    splicList: []
  },
  onLoad: function() {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(log => {
        return util.formatTime(new Date(log))
      })
    })

  },
  addToDo(e) {
    // 我们先来接收一个输入框的值
    let inputValue = e.detail
    console.log(inputValue)
    let obj = {
      inputValue: inputValue,
      status: false
    }
    // 当输入框的值不为空时候就添加
    if (inputValue === "") {
      console.log("输入框的内容不能为空")

    } else {
      this.data.list.push(obj)

    }


    this.setData({
      list: this.data.list,
      inputValue: ""
    })
    console.log(this.data.list)

  },
  ToFinished(e) {
    var checkValue = e.currentTarget.dataset.val;
    var checkIndex = e.currentTarget.dataset.index

    console.log(checkValue); //拿到的多选框的状态
    console.log(checkIndex); //下标

    console.log(this.data.list[checkIndex]); //选中当前的那个item
    console.log(this.data.list[checkIndex].status = !this.data.list[checkIndex].status)
    if (this.data.list[checkIndex].status == true) {

      this.data.finishedList.push(this.data.list[checkIndex])

      this.data.list.splice(checkIndex, 1)
      this.setData({
        list: this.data.list,
        finishedList: this.data.finishedList
      })
      // console.log(this.data.list);
      // console.log(this.data.finishedList)


    }


  },
  del(e) {
    var index = e.currentTarget.dataset.index

    console.log(index);
    this.data.finishedList.splice(index,1);
    this.setData({
      finishedList:this.data.finishedList
    })
   
   
    // console.log(this.data.splicList)

    // var index = this.data.splicList.findIndex(e => e.inputValue.value == item.inputValue.value);
    // console.log(index);
    // this.data.splicList.splice(this.data.splicList[index],1);
    // this.setData({
    //   list:this.data.list,
    //   finishedList:this.data.finishedList,
    //   splicList:this.data.splicList
    // })
    




  },

  ToPendding(e) {
    var checkValue = e.currentTarget.dataset.val;
    var checkIndex = e.currentTarget.dataset.index

    console.log(checkValue); //拿到的多选框的状态
    console.log(checkIndex); //下标

    console.log(this.data.finishedList[checkIndex]); //选中当前的那个item
    console.log(this.data.finishedList[checkIndex].status = !this.data.finishedList[checkIndex].status)
    if (this.data.finishedList[checkIndex].status == false) {

      this.data.list.push(this.data.finishedList[checkIndex])

      this.data.finishedList.splice(checkIndex, 1)
      this.setData({
        list: this.data.list,
        finishedList: this.data.finishedList
      })
      console.log(this.data.list);
      console.log(this.data.finishedList)


    }
  }
})

：