用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

2016-11-5 00:44:30 天下雪原创达人 造轮子 人生巅峰 楼主 165610
小程序,或者说react的特性使它很适合用来开发这种单机版简单交互的备忘录。

初始时页面只有一个简简单单的欢迎词和文本框:

11.png

当聚焦文本框开始输入文字,下方出现提交及重置按钮,默认开始时间为当前;点击时间可以重新选择

12.jpg

13.jpg

默认该项目到点前会进行提醒;也可以点绿色开关改成不需要提醒。

页面提交后,下面出现备忘录列表,每行后面有打钩图标用于切换该事项是否已完成、以及X按钮用以删除该事项;当该事项被设为已完成,会跟其他事项有颜色区分。

14.jpg

同时 下面出现一些操作功能,比如切换“显示全部” 以及 “只显示未完成事项”的功能,全部标为已完成、以及删除全部的按钮。

另外当列表存在数据时,下面还有一个按钮保存数据,将当前数据保存到缓存区域,用以下次打开时继续显示个人备忘录状态。

当时间到达有需要提醒的项目前一分钟,或者如果是需要立即开始的当前时间,界面会跳出项目内容,同时播放语音提醒。点击确定表示马上去完成该项目。此时系统会自动将该项目设置为已完成。

15.jpg

个人体会:每个页面的数据绑定(data)是小程序的核心部分,通过setData存入和花括号的读取实现了普通html静态页面没有做到的动态交互;不管是从当前页面提交的表单数据,还是从网络、json文件、api接口读取来的数据在这里交汇并被处理、使用。理解这一点,其他的具体组件/接口等等具体使用方法都是细枝末节了,可以通过查询文档练习掌握。


项目地址及下载:

https://github.com/gbyuxia/todolist
todolist-master.zip (12.2 KB, 下载次数: 199)
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
感谢分享
谢谢谢谢
谢谢分享
谢谢分享
2016-11-7 16:25:35 soseek 攻城狮
6#
查看本帖隐藏内容查看本帖隐藏内容
12121212121212

评分

参与人数 1浮云 +10 收起 理由
天下雪 + 10 赞一个!

查看全部评分

微信小程序推荐demo
{:3_41:}{:3_41:}{:3_41:}{:3_41:}{:3_41:}{:3_41:}{:3_41:}{:3_41:}{:3_41:}{:3_41:}{:3_41:}{:3_41:}
2016-11-10 17:14:38 Hiamigo 架构狮
10#
分享此页到朋友圈可多为朋友投2票!
新手第一个demo一般都是todolist 哈哈哈
感谢分享

评分

参与人数 1浮云 +10 收起 理由
天下雪 + 10 赞一个!

查看全部评分

flylee2012 发表于 2016-11-11 16:35
新手第一个demo一般都是todolist 哈哈哈

{:5_97:}你的第一个demo是什么?
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
铃声在手机没有提醒是为什么呢,也把铃声路径换成网上的路径了,求问,万分感谢!
谢谢分享
12下一页
发新帖
您需要登录后才可以回帖 登录 | 立即注册