动态生成物品列表文章的重写 以及修改拦截事件的错误示例 #1867
Conversation
|
|
||
| 以物品栏为例，我们要动态生成一个物品，大概需要这样的一组数据： | ||
| 以商品列表为例，我们要动态生成一个可滑动的商品列表。需要先通过Creator 编辑器设定好静态 UI 部分。 |
| // ItemGiftBag.ts | ||
|
|
||
| init(data: ItemGiftList) { | ||
| const str = 'monster/' + data.name + "/spriteFrame"; |
|
LGTM |
|
|
||
|  | ||
|  |
|
|
||
| 以物品栏为例，我们要动态生成一个物品，大概需要这样的一组数据： | ||
| 以商品列表为例，我们要动态生成一个可滑动的商品列表。需要先通过Creator 编辑器设定好静态 UI 部分。 |
There was a problem hiding this comment.
首先，我们需要先创建一个空场景，点击上方工具栏中的 2D/3D 按钮，将 场景编辑器 切换为 2D 视图，然后搭建静态 UI 页面，如下图所示：
具体的操作步骤为：
| - 图标 id，我们可以在另一张资源表中建立图标 id 到对应 spriteFrame 的索引 | ||
|  | ||
|
|
||
| 如上述图示，我们创建一个 [ScrollView 组件](../editor/scrollview.md)，将背景图片和按钮等 UI 放置到上图中的 `bg` 节点中。 |
There was a problem hiding this comment.
-
在 层级管理器 中创建一个 ScrollView 节点，Scrollview 节点下自带的
scrollBar节点和item节点我们这里不需要用到，可将其移除。 -
在 Scrollview 节点下新建一个名为
bg的空节点，然后将背景图片和按钮等 UI 挂载到bg节点下，根据需要排列好，例如下图：
|
|
||
| 如上述图示，我们创建一个 [ScrollView 组件](../editor/scrollview.md)，将背景图片和按钮等 UI 放置到上图中的 `bg` 节点中。 | ||
|
|
||
| 接下来设置 **ScrollView** 组件下的 view 节点保持与父节点 ScrollView 节点的同样的大小。由于 view 节点上含有 Mask 组件，保障了可见区域的同步。 |
There was a problem hiding this comment.
- 设置 ScrollView 节点自带的 view 节点，将
ContentSize属性设置为与父节点 ScrollView 一致。因为 view 节点上默认挂载了 Mask 组件，可以确保之后可见区域的自动同步。
（这里有一个问题，我看 demo 里面，ScrollView 的 ContentSize 并没有跟背景图片一样，view 节点跟 ScrollView 节点也不一样）
|
|
||
|  | ||
| ### 模板组件脚本绑定 |
There was a problem hiding this comment.
这个地方不建议将ItemGiftBag 脚本的内容提前， 这边主要分两个部分 前半部分都是 UI 图片 编辑器方面 后半部分 都是代码设置
There was a problem hiding this comment.
我觉得文档不应该按图片跟代码来划分，整体内容应该以连贯为主，明明在【创建 prefab】里面可以直接说清楚的事儿，完了后面又要回头去看这玩意是啥，在哪设置？
There was a problem hiding this comment.
这个如果提前写了 他也不知道是什么作用 这样写了也不理想，不如这里再引出，就算是他回头看也至少能够了解到这个是什么作用 而不是提前就写上一个开发者不知道是什么作用的代码
Co-authored-by: yufang.wu <2435731537@qq.com>
…lixin85/creator-docs into v3.0-release-createContent # Conflicts: # zh/ui-system/components/engine/list-with-data.md
提交动态生成物品列表 以及修改拦截事件的错误示例