#夏日挑战赛# HarmonyOS - 实现带日期效果的待办事项 原创 精华
作者:俞才彬
前言
初学鸿蒙JS开发技术不久,想要快速结合官方文档上手鸿蒙JS组件开发,本文主要结合HarmonyOS官网上的相关组件及API实现一个根据日期持久化存储待办事项。
效果演示
实现步骤
1. 确定两个页面
首先确定有两个页面:选择日期页面、待办事项页面。选择日期页面将选择的日期如:'2022-6-16'
作为路由参数传递到代办事项页,后者把这个日期作为缓存的key
去取数据,并渲染在页面上。
2. 选择日期页面
页面结构如下:
样式如下:
时间选择器使用picker
组件,type
设置为date
,默认值为今天。选择日期时,触发onchange
事件,拿到选择的日期,点击确定后,跳转至待办事项页面,并将日期作为路由参数传递。
3. 待办事项页面
3.1 进入待办事项页面
进入待办事项页面需要根据路由参数(传递的日期)判断是否是今天,是今天则展示动态的数字时钟。
还需要根据路由参数从缓存中读取待办事项数据,并设置给list
,用于页面展示。调用官网API的storage.get()
方法,由于后续修改数据可能涉及多层回调,考虑到代码可读性,将从缓存中读数据操作用Promise
封装。
3.2 分别展示全部、未完成、已完成待办事项
使用tabs
组件和列表组件list
渲染分别展示全部、未完成和已完成待办事项。
若无数据,全部区域展示 “请先添加今天的待办事项吧!”,已完成和未完成区域展示无数据图片。
在计算属性中计算全部、未完成、已完成的个数,用于tabs
展示。
3.3 添加待办事项
在输入框中输入内容,点击添加按钮,添加待办事项,并调用storage.set()
API将list
存在缓存中,成功之后更新list
以更新视图。若输入框无内容,使用prompt.showToast
提示输入内容。
3.4 完成 / 取消待办事项
点击选择框,勾选或者取消勾选待办事项,并设置缓存。
3.5 删除待办事项
使用piece
组件的onclose
事件删除待办事项,删除前使用prompt.showDialog
弹窗方法询问是否删除,点击确认后删除,并设置缓存。
总结
以上就是完成带日期缓存效果的待办事项的全部过程了,算是对鸿蒙JS开发快速上手的初步认识吧, 后期还可以对其完善,比如在样式、功能方面等等,希望可以和大家共同学习鸿蒙更多的知识,一起进步。
更多原创内容请关注:中软国际 HarmonyOS 技术团队
入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。
效果演示的图好像挂了..
感谢提醒,重新上传了,看下正常了么
实用实用
真棒(๑•̀ㅂ•́)و✧,非常不错