小程序：事件-完结

16_miniapp/day-4/code/pages/index/index.js

@@ -4,17 +4,40 @@ const app = getApp();
 
 Page({
   data: {
-    todolist: [
-      {
-        id: 1, title: '吃饭', done: true
+    todolist: [{
+        id: 1,
+        title: '吃饭',
+        done: true
       },
       {
-        id: 2, title: '睡觉', done: false
+        id: 2,
+        title: '睡觉',
+        done: false
       }
     ]
   },
   onTap(ev) {
     console.log("你敢点我？？？");
-    console.log(ev)
+    // console.log(ev)
   },
-});
+  async onRemoveTodo(e) {
+    // console.log('你要删除该代办吗？', e)
+
+    let res = await wx.showModal({
+      title: '确认删除',
+      content: '确定删除当前代办吗？',
+      cancelText: 'NO',
+      confirmText: 'YES',
+      confirmColor: '#8B1A1A',
+      cancelColor: '#4169E1'
+    })
+
+    if (res.cancel) return;
+
+    const delId = e.target.dataset.id
+
+    this.setData({
+      todolist: this.data.todolist.filter(todo => todo.id !== delId)
+    })
+  }
+});

16_miniapp/day-4/code/pages/index/index.wxml

@@ -2,17 +2,23 @@
   <view bindtap="onTap">你点我呀</view>
 </view> -->
 
-<view bindtap="onTap">你点我呀</view>
+<!-- <view bindtap="onTap">你点我呀</view> -->
 
 <view class="box">
   <text class="title">
     TODOLIST
   </text>
 
-<!-- 在绑定key值时，默认会自动从item下找某个属性 -->
+  <!-- 在绑定key值时，默认会自动从item下找某个属性 -->
   <view wx:for="{{todolist}}" wx:key="id" class="todo-item">
     <checkbox checked="{{item.done}}"></checkbox>
     <text style="width: 375rpx; margin: 0 8px;">{{ item.title }}</text>
-    <icon type="cancel" />
+    <icon type="cancel" bindtap="onRemoveTodo" data-id="{{item.id}}" />
+  </view>
+</view>
+
+<view bindtap="onTap">
+  <view bindtap="onTap" style="padding: 20px;border: 2px solid;background-color: red;">
+    <view catch:tap="onTap">你点我呀</view>
   </view>
 </view>

16_miniapp/day-4/code/pages/index/index.wxss

@@ -1,17 +1,13 @@
 .title {
   font-size: 24px;
   font-weight: 800;
-
   text-align: center;
-
   color: hotpink
 }
 
 .box {
   display: flex;
-
   flex-direction: column;
-
   justify-content: center;
   align-items: center;
 }
@@ -19,4 +15,7 @@
 .todo-item {
   display: flex;
   align-items: center;
+  margin-top: 5px;
+  padding-bottom: 5px;
+  border-bottom: 1px solid #ccc;
 }

16_miniapp/day-4/code/project.private.config.json

@@ -3,5 +3,6 @@
   "projectname": "miniapp",
   "setting": {
     "compileHotReLoad": true
-  }
+  },
+  "libVersion": "2.30.2"
 }