微信小程序-----TODO

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<view class="a">
  <!-- home图标（图片定位代替） -->
  <image src="/img/logo.png"></image>
  <!-- input输入框 -->
  <!-- bindconfirm回车事件 -->
  <input type="text" placeholder="Anything here..." bindconfirm="inp" class="input" value="{{input}}" />
</view>
<!-- wx:for循环渲染数据 -->
<view class="p" wx:for="{{todos}}">
  <view class="o">
    <!-- 小绿豆 -->
    <!-- 通过wx:if判断两个图标相互切换 -->
    <icon type="circle" size="23" wx:if="{{item.completed==false}}" bindtap="chock" data-carcok="{{index}}"></icon>
    <icon type="success" size="23" wx:if="{{item.completed==true}}" bindtap="chock" data-carcok="{{index}}"></icon>
    <!-- 修改 -->
    <view bindtap="alits" data-alit="{{index}}" style="{{ item.completed==true ? 'text-decoration:line-through' : ''}}"
      hidden="{{item.alt}}">
      {{item.name}}
    </view>
    <!-- 修改 -->
    <input type="text" value="{{item.name}}" class="ipt" hidden="{{!item.alt}}" bindblur="set"
      data-carset="{{index}}" />
    <!-- 删除 -->
    <icon bindtap="btn" data-carnum="{{index}}" class="icon-small" type="cancel" size="23" class="btn"></icon>
  </view>
</view>
<!-- 共有几条数据(选中之后不算在期中) -->
<view class="ned">
  <text>Toggle all{{num}} items leftClear completed</text>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
// pages/cate/cate.js
Page({
  data: {
    // 判断添加之后input框是否清空
    input: '',
    // 任务清单数据
    todos: [{
        name: 'Learning WEAPP',
        completed: false,
        alt: false
      },
      {
        name: 'Learning JavaScript',
        completed: true,
        alt: false
      },
      {
        name: 'Learning HTML',
        completed: false,
        alt: false
      },
    ],
    // 总条数
    num: 2
  },
  // 数据渲染
  inp(e) {
    let val = e.detail.value
    let obj = {
      name: val,
      // 小绿豆刚开始未选中
      completed: false,
      // input修改框未点击不让它显示
      alt: false
    }
    // 判断input框是空时不能添加
    if(val==''){
      return
    }
    // push添加到页面
    this.data.todos.push(obj)
    // 总条数随着添加累加
    this.data.num++
    this.setData({
      // 添加后渲染到页面
      todos: this.data.todos,
      // 条数
      num: this.data.num,
      // 添加之后更新input框
      input: this.data.input
    })
  },
  // 删除
  btn(e) {
    let val = e.currentTarget.dataset.carnum
    // splice删除对应的下标
    this.data.todos.splice(val, 1)
    // 判断删除之后总条数是减少
    this.data.num--
    this.setData({
      // 删除之后页面刷新
      todos: this.data.todos,
      // 删除之后条数更新
      num: this.data.num
    })
  },
  // 复选按钮
  chock(e) {
    let val = e.currentTarget.dataset.carcok
    // 点击选中按钮是否切换
    this.data.todos[val].completed = !this.data.todos[val].completed
    // 判断小绿豆选中之后总条数是否增加或者减少
    if (this.data.todos[val].completed == true) {
      // 复选框点击后点小绿豆成禁用状态
      this.data.todos[val].alt = false
      this.data.num--
    } else {
      this.data.num++
    }
    this.setData({
      todos: this.data.todos,
      // 小绿豆点击后条数刷新
      num: this.data.num
    })
  },
  // 修改
  alits(e) {
    let val = e.currentTarget.dataset.alit
    // 判断小绿豆选中之后直接结束不在进行任何操作
    if (this.data.todos[val].completed == true) {
      return
    }
    // 点击显示隐藏input框
    this.data.todos[val].alt = !this.data.todos[val].alt
    this.setData({
      todos: this.data.todos
    })
  },
  // 确定修改
  set(e) {
    let val = e.currentTarget.dataset.carset
    let arr = e.detail.value
    // 失去焦点后修改成功
    this.data.todos[val].name = arr
    // 失去焦点后显示隐藏input框
    this.data.todos[val].alt = !this.data.todos[val].alt
    this.setData({
      todos: this.data.todos
    })
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/* pages/cate/cate.wxss */
.a{
  display: flex;
  justify-content: center;
  position: relative;
}
image{
  width: 25px;
  height: 18px;
  position: absolute;
  left: 22px;
  margin-top: 2px;
}
.input{
  width: 80%;
  border: 1px solid black;
  margin-bottom: 20px;
  padding-left: 35px;
}
.p{
 display: flex;
  justify-content: center;
}
.o{
  display: flex;
  position: relative;
  padding: 10px;
  text-align: left;
  border: 1px solid black;
  width: 200px;
  margin-top: -1px;
}
.btn{
  position: absolute;
  right: 5px;
}
.ipt{
  border: 1px solid black;
}
.ned{
  width: 100%;
  text-align: center;
  margin-top: 20px;
  color: rgb(59, 57, 57);
}