写一个微信小程序代码 创建一个列表,列表中可以添加不同用户,每个用户下面可以添加多项任务,并在每个任务后面添加打卡按钮
时间: 2024-03-14 22:46:07 浏览: 22
好的,以下是一个简单的微信小程序代码,用于创建一个列表,列表中可以添加不同用户,每个用户下面可以添加多项任务,并在每个任务后面添加打卡按钮。
```
<view class="container">
<view class="header">任务列表</view>
<scroll-view scroll-y="true" class="scroll-view">
<view wx:for="{{userList}}" wx:key="index">
<view class="user">{{item.name}}</view>
<view wx:for="{{item.taskList}}" wx:key="index">
<view class="task">{{index + 1}}. {{item.taskName}}</view>
<button class="btn" bindtap="checkTask" data-user="{{item.name}}" data-task="{{item.taskName}}">打卡</button>
</view>
</view>
</scroll-view>
<view class="add-btn" bindtap="addUser">添加用户</view>
</view>
```
其中,`userList`为一个数组,用于存储不同的用户和他们的任务列表。每个用户的任务列表是一个数组,包含多个`task`对象,每个`task`对象包含`taskName`属性,表示任务名称。
在每个任务后面添加了一个打卡按钮,点击按钮会触发`checkTask`函数,该函数会获取到对应的用户名称和任务名称,并进行相应的处理。在这里,我们可以将打卡记录保存到数据库中,或者发送给服务器进行处理。
在页面底部还添加了一个添加用户的按钮,点击该按钮会触发`addUser`函数,用于添加新的用户到列表中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)