小程序 第一个学习示例(TodoList)

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