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