From 93c251d643da5c82f5336565853c086b63540a7a Mon Sep 17 00:00:00 2001 From: zhousg Date: Mon, 20 Nov 2023 10:54:58 +0800 Subject: [PATCH] feat: add docs --- docs/docs/guide/index.mdx | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/docs/docs/guide/index.mdx b/docs/docs/guide/index.mdx index 7a19666..cade57e 100644 --- a/docs/docs/guide/index.mdx +++ b/docs/docs/guide/index.mdx @@ -1124,7 +1124,7 @@ struct Index { - 使用 `class` 来约束对象类型,和嵌套对象和对象数组。 - 嵌套对象和对象数组,采用赋值的方式进行更新,可以更新UI。 -- 🚦 后期如果拆分了组件,会给大家补充另外一种深层数据变更更新UI的方式 +- 🚦 后期如果学习组件传值,会给大家补充另外一种深层数据变更更新UI的方式 ::: @@ -1299,6 +1299,10 @@ struct Index { ### 1. 底部输入区域 +- 抽离 `Nav` `Comment` 组件 +- 使用 `Stack` 组件吧底部输入框固定下下方 +- 加上 `Scroll` 将来页面内容可以滚动 + ```typescript @Entry @Component @@ -1413,8 +1417,9 @@ struct CommentComp { ### 2. 静态回复列表 -```typescript +- 参考评论组件,使用 `ForEach` 循环相同的回复容器 +```typescript // space Divider() .strokeWidth(8) @@ -1471,6 +1476,9 @@ Column() { ### 3. 实现渲染 +- 使用 `class` 定义好回复数据模型 `ReplyItem` +- 初始化一些模拟数据 +- 完成页面渲染 ```typescript title="models/Index.ets" export class ReplyItem { @@ -1638,6 +1646,8 @@ struct Index { ### 4. 实现点赞 +- 注册点赞区域点击事件 +- 通过索引复制的方式完成数据的更新和UI的更新 ```typescript onLike(item: ReplyItem) { @@ -1652,7 +1662,7 @@ onLike(item: ReplyItem) { promptAction.showToast({ message: '点赞成功' }) } const index = this.replyList.findIndex(rep => rep.id === reply.id) - this.replyList.splice(index, 1, reply) + this.replyList[index] = reply } ``` @@ -1675,6 +1685,9 @@ Row() { ### 6. 进行回复 +- 收集输入框数据 +- 发布评论内容,和情况输入内容 +- 需要扩展头像类型兼容 `Resource` 类型 ```diff title="models/Index.ets" export class ReplyItem {