Applet data binding renders the view to make the relationship between the data and the view clear

WXML:

<! --pages/todoList/toduList.wxml-->
<input class='addItem' placeholder-style='font-size:16px; ' placeholder='Input items' bindinput='changeStr' value='{{addStr}}'></input>
<button class='add' type='primary' bindtap='addTodo'>submit</button>
<view class='listBox'>
  <view class='listItem' wx:for="{{addList}}" wx:key='item.id'>
    <text class='content'>{{item.content}}</text>
    <text class='time'>{{item.time}}</text>
    <button class='finish' disabled="{{item.finish}}" bindtap='tapHandler' data-id='{{item.id}}'>{{item.finish? 'Done ':' done '}}</button>
    <button class='del' type='warn' bindtap='tapHandler' data-id='{{item.id}}'>delete</button>
  </view>
</view>
Copy the code

WXSS:

.addItem {
  position: fixed;
  top: 0;
  left: 0;
  width: 550rpx;
  height: 60rpx;
  background: #ccc;
  padding-left: 30rpx;
  border-radius: 10rpx;
  display: inline-block;
  z-index: 10;
}

.add {
  position: fixed;
  top: 0;
  right: 0;
  height: 60rpx;
  line-height: 60rpx;
  display: inline-block;
  width: 150rpx;
  font-size: 30rpx;
  z-index: 10;
}

.content {
  display: inline-block;
  /* background: lightcoral; * /
  width: 250rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.time {
  /* background: lightblue; * /
  vertical-align: middle;
}

.listBox {
  margin-top: 60rpx;
}

.listItem {
  font-size: 14px;
  padding-top: 20rpx;
}

.del..finish {
  display: inline-block;
  font-size: 22rpx;
  width: 100rpx;
  height: 60rpx;
  line-height: 60rpx;
  vertical-align: middle;
}
Copy the code

Js:

// pages/todoList/toduList.js
Page({
  data: {
    addStr: ' '.// Bind the value to the input value
    addList: [] // List of events
  },
  changeStr(e) {
    this.setData({
      addStr: e.detail.value // When the user enters the value, modify the current event content})},addTodo(e) {
    var str = this.data.addStr.trim() // Remove Spaces before and after characters
    if (str.length === 0) {
      return;
    }
    var addList = this.data.addList;
    var date = new Date(a)// Generate the commit time
    var time = date.toLocaleString(); // Convert to standard time
    var obj = { // The content of each item
      id: addList.length, // Set id to the length of the array for subsequent operations
      content: str, // Contents of the event
      time: time, // Submit time
      finish: false // Whether it is completed
    }
    addList.push(obj) // Add the item to the list
    this.setData({ // Refresh the list and empty the input
      addList,
      addStr: ' '})},tapHandler(e) { // Triggered when the user clicks Finish or delete
    var addList = this.data.addList
    var id = e.target.dataset.id // Get the time pass id
    var type = e._relatedInfo.anchorTargetText // Get click type: Delete or finish
    for (let i = 0; i < addList.length; i++) { // Iterate over the list
      if (addList[i].id === id) {
        switch (type) {
          case 'complete':
            addList[i].finish = true; // Execute when you click Finish
            break;
          case 'delete':
            addList.splice(i, 1); // Execute when you click delete
            break;
          default:
            break;
        }
        this.setData({ // Refresh the list
          addList
        })
      }
    }
  }
})
Copy the code