基于 taro 1.1.1 版本搭建的todo list小程序。
taro是一个支持一套代码编译为多端代码的框架,现已支持微信小程序、支付宝小程序、百度小程序、H5及React Native。
项目中仅使用了taro-ui,经查询文档,发现使用其他第三方组件库也十分简单。但仍旧做了一些简单的封装尝试作为练习。
封装这个组件是因为taro-ui中的复选框必须带有label,带有列表似的边框样式难以去除,以及默认居左的样式难以修改。
属性名 | 类型 | 默认值 | 可选值 | 说明 |
---|---|---|---|---|
size | string | 'default' | small :较小尺寸default :默认大小large :较大尺寸 |
设置复选框的大小 |
status | bool | false | true:默认选中 false: 默认未选中 |
设置复选框的初始状态 |
onClick(status) | func | --- | --- | 暴露出来的复选框点击事件,会在执行完复选框点击样式变更等操作后调用,回传一个参数为status,即复选框当前的选中状态 |
该组件为针对本次项目封装的组件。
效果图如下。
属性名 | 类型 | 默认值 | 可选值 | 说明 |
---|---|---|---|---|
title | string | '待办事项' | 任意字符串 | 卡片的标题 |
desc | string | '描述信息' | 任意字符串 | 卡片描述信息 |
status | bool | false | true:状态已完成 false: 状态未完成 |
用于指定卡片显示为已完成状态/未完成状态 |
onClick(item, status) | func | --- | --- | 暴露出来的待办事项卡片复选框点击事件,会在执行完待办事项卡片点击样式变更等操作后调用,回传两个参数分别为item和status,即该卡片接收到的数据项及当前选中状态,status为true即为被选中 |
- 复选框组件封装
- 待办事项卡片组件封装
- 待办事项列表编写
- 待办事项本地存储能力
- 待办事项清空能力
- 小程序分享能力
- 依据数据缓存的id生成器
- 修改待办卡片组件图标支持修改
- 弹出模态框时禁用浮动按钮
- 待办事项页面删除功能
- 待办事项页面进度展示
- 待办事项页面如果待办事项为空提示无需清空功能
- 番茄钟倒计时功能
- 番茄钟启动、停止功能
- 番茄钟运行长时间后点击停止时的提示功能
- 番茄钟本地数据存储功能
- 数据统计功能
- 项目文档整理