标签：使用 内容 两种 删除按钮 图片 示例 取消 list ima
1. 概述
1.1 说明
在微信开发者工具环境下开发一个简易的TodoList功能,以便能够进行学习与熟练小程序相关功能与信息.。
示例中,初步计划包含以下功能:
-
- 1.能够进行新增计划信息
- 2.计划信息可分为已完成与未完成两种状态信息
- 3.数据信息可列表显示
- 4.可以对列表中数据进行标记完成与删除操作
- 5.可进行分页操作(此处仅为一数据示例)
1.2 图例
1.3 图例说明
1.3.1 列表
使用三个状态分别控制不同的列表信息,点击不同的状态加载不同的数据:
-
- 全部 -- 所有的数据信息都加载至此状态对应列表
- 已完成 -- 所有已完成状态的数据信息列表
- 未完成 -- 所有未完成状态的数据信息列表
1.3.2 新增
点击列表上的添加按钮显示出新增内容区域,新增内容有确定添加和取消两种功能:
-
- 确定添加 -- 把输入至文本框中的内容添加至列表中,状态为未完成,添加完成后关闭新增内容区域
- 取消 -- 直接关闭新增内容区域
1.3.3 滑动操作
点击到某一数据信息,向左进行滑动显示出来对应的操作按钮(删除或标记完成),使用position进行控制相关显示信息;
设计原理:内容信息与按钮在同一行显示,使用z-index控制堆叠.按钮的z-index小于内容的z-index.
-
- 未完成 -- 滑动后显示出删除按钮与标记完成按钮,此时的最大滑动宽度为删除按钮与标记按钮之和
- 已完成 -- 滑动后显示出删除按钮,此时的最大滑动宽度为删除按钮的宽度.
1.3.4 按钮操作
-
- 删除 -- 列表中删除对应的数据行
- 标记完成 -- 列表中对应行数据的状态由未完成更改为完成.
2. 代码
码云: https://gitee.com/ajuanK/wxSimpleTodoList.git
小程序 第一个学习示例(TodoList)
标签：使用 内容 两种 删除按钮 图片 示例 取消 list ima
原文地址：https://www.cnblogs.com/ajuan/p/10283266.html
