ScrollView 组件参考

    scrollview-inspector

    点击 属性检查器 下面的 添加组件 按钮,然后选择 UI/ScrollView 即可添加 ScrollView 组件到节点上。

    滚动视图的脚本接口请参考 ScrollView API

    关于使用可以参考范例 ScrollView( | Gitee)。

    事件结构参考:

    ScrollView 的事件回调有两个参数,第一个参数是 ScrollView 本身,第二个参数是 ScrollView 的事件类型。

    ScrollBar 是可选的,你可以选择只设置 Horizontal ScrollBar 或者 Vertical ScrollBar,当然也可以两者都设置。建立关联可以通过在 层级管理器 里面拖拽一个带有 ScrollBar 组件的节点到 ScrollView 的相应字段完成。

    ScrollView 组件必须有指定的 content 节点才能起作用,通过指定滚动方向和 content 节点在此方向上的长度来计算滚动时的位置信息,Content 节点也可以通过添加 设置自动 resize,也可以通过添加 Layout 来完成子节点布局,但是这两个组件不应该同时添加到一个节点上以避免产生不可预料的后果。

    通常一个 ScrollView 的节点树如下图:

    这里的 view 用来定义一个可以显示的滚动区域,所以通常 MaskComponent 组件会被添加到 view 上。可以滚动的内容可以直接放到 content 节点或者添加节 content 的子节点上。

    这种方法添加的事件回调和使用编辑器添加的事件回调是一样的,都是通过代码添加。首先需要构造一个 EventHandler 对象,然后设置好对应的 targetcomponenthandlercustomEventData 参数。

    通过 scrollview.node.on('scroll-to-top', ...) 的方式来添加

    1. const { ccclass, property } = _decorator;
    2. @ccclass("example")
    3. export class example extends Component {
    4. @property(ScrollView)
    5. scrollview: ScrollView | null = null;
    6. this.scrollview.node.on('scroll-to-top', this.callback, this);
    7. callback(scrollView: ScrollView) {
    8. // 回调的参数是 ScrollView 组件,注意这种方式注册的事件,无法传递 customEventData
    9. }
    10. }

    同样的,你也可以注册 scrollingtouch-upscroll-began 等事件,这些事件的回调函数的参数与 的参数一致。

    关于完整的 ScrollView 的事件列表,可以参考 ScrollView 的 API 文档 ScrollView API