跳到主要内容

<pc-scrollbar>

<pc-scrollbar> 添加滚动条组件，由轨道及可拖动滑块组成。value 为滑块位置，范围 0 到 1，可显示和设置 <pc-scroll-view> 的位置，也可独立作滑块控件。

用法
  • 必须直接位于同时具有 <pc-element> 的 <pc-entity>、<pc-model> 或 <pc-node> 下。
  • 视图通过 horizontal-scrollbar 或 vertical-scrollbar 引用它，随后会自动设置 handle-size 和 value，覆盖手动值。
  • handle 指向轨道的子实体，应带启用 use-input 的图像元素，并锚定轨道起点。垂直滚动条使用 anchor="0 1 1 1" pivot="0.5 1"，如下例。

属性​

属性类型默认值说明
enabledBoolean（布尔）"true"组件启用状态
handle实体引用-用作可拖动滑块的 <pc-entity>
handle-sizeNumber（数字）"0"滑块长度占轨道的比例，0 到 1。默认 0 没有长度，独立使用时必须设置。滚动视图会根据可见内容比例自动设置
orientationEnum（枚举）"horizontal"方向："horizontal" | "vertical"
valueNumber（数字）"0"位置，0 到 1。垂直 0 为顶部，水平 0 为左侧。滚动视图会自动同步

示例​

独立垂直滚动条可作为滑块，拖动橙色部分。试着修改 handle-size，或将起始 value 设为 1，移到底部：

实时示例
<pc-app>
    <pc-scene>
        <pc-entity name="camera">
            <pc-camera clear-color="#1d1f2b"></pc-camera>
        </pc-entity>
        <pc-entity name="ui">
            <pc-screen screen-space="true" scale-mode="blend" reference-resolution="640 320"></pc-screen>
            <pc-entity name="scrollbar">
                <pc-element type="image" anchor="0.5 0.5 0.5 0.5" pivot="0.5 0.5"
                            width="20" height="240" color="#3a3f4b"></pc-element>
                <pc-scrollbar orientation="vertical" handle-size="0.35" handle="#handle"></pc-scrollbar>

                <!-- Draggable handle -->
                <pc-entity name="handle" id="handle">
                    <pc-element type="image" anchor="0 1 1 1" pivot="0.5 1" margin="0 0 0 0" color="#ff8a3c" use-input></pc-element>
                    <pc-button hover-tint="#ffa76d" pressed-tint="#cc6e30"></pc-button>
                </pc-entity>
            </pc-entity>
        </pc-entity>
    </pc-scene>
</pc-app>

JavaScript 接口​

可以通过 ScrollbarComponentElement API创建和操作元素。

component 是底层 ScrollbarComponent，就绪前为 null，其他功能可通过它访问。

另请参阅​

示例：滚动视图。