简体中文

下载 App

输入关键字搜索

开发者能力认证

鸿蒙高校创新赛

HarmonyOS 7

animation

HarmonyOS行业解决方案

layoutWeight

HarmonyOS模板&组件

bindPopup

bindsheet

CTRL+K

文档管理中心

我的

Hello，

欢迎来到开发者联盟

scroll-view（1110+）

更新时间: 2025-05-07 07:42

本文导读

展开章节

概述

可以滚动的视图区域。

使用限制

展开

限制条件	说明
适用终端	手机、平板、智慧屏、车机
适用区域	全球

子组件

支持。

属性

除了支持通用属性以外，还支持如下属性。

展开

名称	类型	默认值	是否必填	描述
scroll-direction	string	vertical	否	滚动方向，取值为vertical、horizontal和vertical_horizontal。 vertical：在flex-direction取值为column的情况下，当子视图区域的高度大于滚动视图的高度时，可以上下滚动滚动视图，让视图外的内容可见；当子视图区域的宽度大于滚动视图的宽度时，子视图区域的水平内容将被裁剪。 horizontal：在flex-direction取值为row的情况下，当子视图区域的宽度大于滚动视图的宽度时，可以左右滚动滚动视图，使视图外的内容可见；当子视图区域的高度大于滚动视图的高度时，子视图区域的垂直内容将被裁剪。 vertical_horizontal：在flex-direction取值为column的情况下，子视图区域不会被裁剪。
show-scrollbar	boolean	true	否	是否显示滚动条。

名称

类型

默认值

是否必填

描述

scroll-direction

string

vertical

否

滚动方向，取值为vertical、horizontal和vertical_horizontal。

vertical：在flex-direction取值为column的情况下，当子视图区域的高度大于滚动视图的高度时，可以上下滚动滚动视图，让视图外的内容可见；当子视图区域的宽度大于滚动视图的宽度时，子视图区域的水平内容将被裁剪。
horizontal：在flex-direction取值为row的情况下，当子视图区域的宽度大于滚动视图的宽度时，可以左右滚动滚动视图，使视图外的内容可见；当子视图区域的高度大于滚动视图的高度时，子视图区域的垂直内容将被裁剪。
vertical_horizontal：在flex-direction取值为column的情况下，子视图区域不会被裁剪。

show-scrollbar

boolean

true

否

是否显示滚动条。

样式

支持通用样式。

事件

除了支持通用事件以外，还支持如下事件。

展开

名称	参数	描述
scroll	{scrollX:Number, scrollY:Number, oldScrollX:Number, oldScrollY:Number}	滚动时触发。 scrollX：事件触发时，左侧距X轴方向的距离，单位为px。 scrollY：事件触发时，顶部距Y轴方向的距离，单位为px。 oldScrollX：滚动前，左侧距X轴方向的距离，单位为px。 oldScrollY：滚动前，顶部距Y轴方向的距离，单位为px。
scrollbegindrag	-	用户开始拖动滚动视图时触发。
scrollenddrag	-	用户停止拖动滚动视图时触发。
scrollstart	{scrollX:Number, scrollY:Number}	滚动视图开始滑动时触发。
scrollstop	{scrollX:Number, scrollY:Number}	滚动视图滑动结束时触发。

方法

展开

名称	参数	描述
scrollIntoView	{id}	滚动到指定id子组件的位置，设置向哪个方向滚动，然后滚动到哪个方向的元素。
scrollTo	{x: Number/String, y: Number/String, smooth: Boolean}	滚动到指定的 x、y 偏移量。 smooth：是否平滑滚动，可选，默认为true。说明 x和y不能同时为空。如果只填x，则y轴不移动并水平滚动到指定的x；如果只填y，则x轴不移动并垂直滚动到指定的y。

名称

参数

描述

scrollIntoView

{id}

滚动到指定id子组件的位置，设置向哪个方向滚动，然后滚动到哪个方向的元素。

scrollTo

{x: Number/String, y: Number/String, smooth: Boolean}

滚动到指定的 x、y 偏移量。

smooth：是否平滑滚动，可选，默认为true。

说明

x和y不能同时为空。
如果只填x，则y轴不移动并水平滚动到指定的x；如果只填y，则x轴不移动并垂直滚动到指定的y。

示例代码

收起
自动换行
深色代码主题
复制
<template>
<!-- Only one root node is allowed in template. -->
<div class="container">
  <text class="title">Vertical ScrollView</text>
  <scroll-view id="verticalScrollView" class="content" height="100px" flex-direction="column">
    <text>Some Information</text>
    <text>Some Information</text>
    <text>Some Information</text>
    <text>Some Information</text>
    <text>Some Information</text>
    <text>Some Information</text>
    <text>Some Information</text>
    <text>Some Information</text>
  </scroll-view>
  <text class="title">Horizontal ScrollView</text>
  <scroll-view id="horizontalScrollView" class="content" width="300px" scroll-direction="horizontal" flex-direction="row">
    <text>Some Information</text>
    <text>Some Information</text>
    <text>Some Information</text>
    <text>Some Information</text>
    <text>Some Information</text>
    <text>Some Information</text>
    <text>Some Information</text>
    <text>Some Information</text>
  </scroll-view>
  <text class="title">Vertical Horizontal ScrollView</text>
  <scroll-view id="verticalHorizontalScrollView" class="content" height="300px" scroll-direction="vertical_horizontal" flex-direction="column" onscrollbegindrag="onscrollbegindrag" onscrollenddrag="onscrollenddrag" onscrollstart="onscrollstart" onscrollstop="onscrollstop" onscroll="onscroll">
    <text id="here">Some Information</text>
    <text>Some Information</text>
    <text>Some Information</text>
    <text>Some Information</text>
    <text>Some Information</text>
    <text>Some Information</text>
    <text>Some Information</text>
    <text>Some Information</text>
    <div class="container" width="2000" height="2000">
      <image src="/Common/img/xmad.jpg"></image>
    </div>
    <select id="select">
      <option value="01"selected="false">Option 1</option>
      <option value="02"selected="false">Option 2</option>
      <option value="03"selected="false">Option 3</option>
      <option value="04"selected="false">Option 4</option>
      <option value="05"selected="true">Option 5</option>
    </select>
    <text id="here" style="color: #048004;">ScrollIntoView to here</text>
    <text>Some Information</text>
    <text>Some Information</text>
    <text>Some Information</text>
  </scroll-view>
  <input type="button" class="content" value="scrollIntoView" onclick=scrollIntoView></input>
  <input type="button" class="content" value="ScrollInto" onclick=scrollInto></input>
</div>
</template>
<style>
  .container {
    flex-direction: column;
  }
  .title {
    color: #c71585;
    font-size: 40px;
  }
  .content {
    margin: 10px;
    border: 1px solid #000000;
  }
</style>
<script>
  module.exports = {
    data: {
    },
    onInit() {
      this.$page.setTitleBar({ text: 'SR337' })
    },
    scrollIntoView() {
      this.$element('verticalHorizontalScrollView').scrollIntoView({ id: "here" })
    },
    scrollInto() {
      this.$element('verticalHorizontalScrollView').scrollTo({ x: 300, y: 500 })
    }, onscroll(event) {
      console.log("onscroll x " + event.scrollX + " y " + event.scrollY);
    },
    onscrollbegindrag() {
      console.log("scrollbegindrag");
    },
    onscrollenddrag() {
      console.log("scrollenddrag");
    },
    onscrollstart(event) {
      console.log("onscrollstart x " + event.scrollX + " y " + event.scrollY);
    },
    onscrollstop(event) {
      console.log("onscrollstop x " + event.scrollX + " y " + event.scrollY);
    }
  }
</script>