跳到主要内容

<pc-scroll-view>

<pc-scroll-view> 添加滚动视图，通过视口显示大内容的一部分，用户可拖动、使用滚轮或滚动条查看其余部分。

用法
  • 必须直接位于同时具有 <pc-element> 的 <pc-entity>、<pc-model> 或 <pc-node> 下。
  • 通过实体 name 或文档级 # 选择器引用视口、内容和滚动条，详见实体引用。
  • 视口应为启用 mask 的图像元素。遮罩自身不显示，因此 color 不生效。
  • 内容必须是视口子项，锚点与轴心为左上 anchor="0 1 0 1" pivot="0 1"，并自行设置容纳全部内容的尺寸。视图不会自动调尺寸，拖动还需 use-input，详见内容尺寸。
  • 指针位于视图内启用输入的元素上，例如内容时，滚轮可滚动视图。

属性​

属性类型默认值说明
bounce-amountNumber（数字）"0.1"Bounce 模式越界后的回弹缓慢程度。0 立即返回，0.1 类似手机，更大值更慢
content实体引用-滚动时移动的内容 <pc-entity>
enabledBoolean（布尔）"true"组件启用状态
frictionNumber（数字）"0.05"甩动后的减速，0 到 1。0 不减速，1 立即停止
horizontalBoolean（布尔）"true"是否启用水平滚动
horizontal-scrollbar实体引用-带水平 <pc-scrollbar> 的 <pc-entity>
horizontal-scrollbar-visibilityEnum（枚举）"always"水平滚动条显示方式："always" | "when-required"
mouse-wheel-sensitivityVector2"1 1"X、Y 滚轮灵敏度，某轴为 0 时禁用该方向
scroll-modeEnum（枚举）"bounce""clamp" | "bounce" | "infinite"，分别为边界停止、越界回弹和无限滚动。滚轮不回弹
use-mouse-wheelBoolean（布尔）"true"是否响应鼠标滚轮
verticalBoolean（布尔）"true"是否启用垂直滚动
vertical-scrollbar实体引用-带垂直 <pc-scrollbar> 的 <pc-entity>
vertical-scrollbar-visibilityEnum（枚举）"always"垂直滚动条显示方式："always" | "when-required"
viewport实体引用-用作视口的 <pc-entity>，即裁切内容的遮罩图像

示例​

通过滚轮、拖动或滚动条滚动各行，视口 mask 负责裁切。试试 scroll-mode="clamp" 取消回弹、friction 为 0.5 更快停止，或增大内容 height：

实时示例
<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="scroll-view">
                <pc-element type="group" anchor="0.5 0.5 0.5 0.5" pivot="0.5 0.5" width="260" height="260"></pc-element>
                <pc-scroll-view
                    horizontal="false"
                    vertical="true"
                    viewport="#viewport"
                    content="#content"
                    vertical-scrollbar="#v-scrollbar"></pc-scroll-view>

                <!-- Viewport clips the content to the scroll view's bounds -->
                <pc-entity name="viewport" id="viewport">
                    <pc-element type="image" anchor="0 0 1 1" margin="0 0 20 0" mask></pc-element>

                    <!-- Content is moved as the view is scrolled. Its height is the laid-out
                         size of the rows: 8 x 60, plus 7 x 8 spacing, plus 10 padding top and bottom -->
                    <pc-entity name="content" id="content">
                        <pc-element type="group" anchor="0 1 0 1" pivot="0 1" width="240" height="556" use-input></pc-element>
                        <pc-layout-group orientation="vertical" alignment="0 1" spacing="0 8" padding="10 10 10 10"></pc-layout-group>
                        <pc-entity name="row-1"><pc-element type="image" width="220" height="60" color="#ff8a3c"></pc-element></pc-entity>
                        <pc-entity name="row-2"><pc-element type="image" width="220" height="60" color="#7ab8ff"></pc-element></pc-entity>
                        <pc-entity name="row-3"><pc-element type="image" width="220" height="60" color="#8ce99a"></pc-element></pc-entity>
                        <pc-entity name="row-4"><pc-element type="image" width="220" height="60" color="#ffd43b"></pc-element></pc-entity>
                        <pc-entity name="row-5"><pc-element type="image" width="220" height="60" color="#e599f7"></pc-element></pc-entity>
                        <pc-entity name="row-6"><pc-element type="image" width="220" height="60" color="#63e6be"></pc-element></pc-entity>
                        <pc-entity name="row-7"><pc-element type="image" width="220" height="60" color="#ffa8a8"></pc-element></pc-entity>
                        <pc-entity name="row-8"><pc-element type="image" width="220" height="60" color="#74c0fc"></pc-element></pc-entity>
                    </pc-entity>
                </pc-entity>

                <!-- Vertical scrollbar: a 20-unit strip hugging the inside of the right edge -->
                <pc-entity name="v-scrollbar" id="v-scrollbar">
                    <pc-element type="image" anchor="1 0 1 1" pivot="1 0.5" width="20" margin="0 0 0 0" color="#2a2d36"></pc-element>
                    <pc-scrollbar orientation="vertical" handle="#v-handle"></pc-scrollbar>
                    <pc-entity name="handle" id="v-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-entity>
    </pc-scene>
</pc-app>

JavaScript 接口​

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

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

另请参阅​

示例：滚动视图。