Skip to main content

Scrolling Container

ScrollView

Usage Instructions

Scrolling Container can achieve the scrolling effect for pages or functional modules. When the total width/height occupied by the component content inside the scrolling container exceeds the width/height of the scrolling container itself, scroll bars will appear, allowing users to slide the scroll bars to view all content within the container. Example as below:

  1. Drag a Scrolling Container component and set its height to 300

  1. Add three image components to the scrolling container, setting the height of each image component to 200. This will make the total height of the components inside the container exceed the container's own height, causing the scroll bar to appear.

Property Introduction

External properties received by the component

Property Name
Property Identifier
Type
Description
Rolled element ID(Web)scrollIntoViewstring

This feature is not supported in mini programs currently.

Scroll the current element into the viewable area of the browser window

horizontal scroll bar positionscrollLeftnumber

Input default value, the horizontal scroll bar will move to the position by default

vertical scroll positionscrollTopnumber

Input default value, the vertical scroll bar will move to the location by default

Trigger scrolltolower event when distance from bottom/right is reachedlowerThresholdnumber

Example: 50

How far from the top/left to trigger the scrolltoupper eventupperThresholdnumber

Example: 50

Control scrollbar visibility(Mini Program)showScrollbarboolean

Hide scrollbar requires scroll-view enablement to take effect after enhanced feature

Control whether to show/hide the scrollbar

Example: true

EnableEnable scroll-view enhanced feature(Mini Program)enhancedboolean

Enable scroll-view enhanced feature

Example: false

Elastic control of scroll-view boundary on iOS(Mini Program)bouncesboolean

Example: true

Paginate slide effect(Mini Program)pagingEnabledboolean

Example: false

Sliding deceleration rate control(Mini Program)fastDecelerationboolean

Example: false

enable pull-down refresh(Mini Program)refresherEnabledboolean

Enabled, you can customize pull-down refresh settings

Example: false

Set custom pull-down refresh threshold(Mini Program)refresherThresholdnumber

Example: 50

Set custom pull-down refresh default style(Mini Program)refresherDefaultStylestring

Example: "block"

Set custom pull-down refresh area background color(Mini Program)refresherBackgroundstring

Example: "#fff"

Set current dropdown refresh status(Mini Program)refresherTriggeredboolean

Example: false

Enable scroll anchoring feature(Mini Program)scrollAnchoringboolean

Enable scroll-anchoring feature

Example: false

Enable flexbox layout(Mini Program)enableFlexboolean

Enable flexbox layout

Example: false

On iOS, click the top status bar. On Android, double tap the title bar to return to top. Supports only vertical scrollbar.(Mini Program)enableBackToTopboolean

When enabled, the scrollbar will automatically return to top after performing corresponding operations.

Example: false

Use animation transition when setting the scrollbar position(Mini Program)scrollWithAnimationboolean

Enable scrollbar animation

Example: false

Enable horizontal scrollscrollXboolean

When enabled, the horizontal scroll bar will be activated, and the component supports scrolling left and right.

Example: false

Vertically scrollablescrollYboolean

When enabled, the vertical scroll bar will be activated, and the component supports scrolling up and down.

Example: true

Event Introduction

Events exposed by the component. You can listen to component events to trigger external actions

Event Name
Event Code
Event Output Parameters event.detail
Applicable Scenarios
Description
Trigger on scrollscrollCompatible with all platforms

-

Trigger on scroll to bottom/rightscrolltolowerCompatible with all platforms

-

Trigger on scroll to top/leftscrolltoupperCompatible with all platforms

-

Slide start event (Enable enhanced property simultaneously to take effect)dragstartMini Program

-

sliding event (enable simultaneously with enhanced property to take effect)draggingMini Program

-

Sliding end event (Enable enhanced property simultaneously to take effect)dragendMini Program

-

Custom pull-down refresh control was scrolled downrefresherpullingMini Program

-

Custom pull-down refresh triggeredrefresherrefreshMini Program

-

Custom pull-down refresh was resetrefresherrestoreMini Program

-

Custom pull-down refresh terminatedrefresherabortMini Program

-

Frequently Asked Questions

What is the difference between General Container / Grid Layout / Scrolling Container?

General Container / Grid Layout / Scrolling Container are three commonly used container types in WeDa, and their differences are as follows:

  • General Container: The most basic container type used to hold text, images, and other content within a page. It can nest other components and achieve different layout effects through style settings. By default, it lacks scrolling functionality. Content will automatically expand vertically if no height is specified. Similar to View in mini-programs and div in Web development.
  • Grid Layout: A container designed for layout purposes that extends flexible layout capabilities beyond basic containers like the general container. It divides the page into individual grids, allowing arbitrary combinations of different grids to create various layouts such as left-right arrangements and multi-column rows. It also supports displaying different layout patterns across multiple devices.
  • Scrolling Container: A container with scroll bars. After setting its width and height, if the content exceeds the container's boundaries, the content can be scrolled within the container. Similar to ScrollView in mini-programs.

In actual development, it is recommended to use Grid Layout for detailed arrangements of entire pages and internal modules. For multi-device requirements, display effects can be configured across different platforms. When scrolling beyond content areas is needed, Scrolling Containers can be utilized.

How to implement local scrolling?

Scrolling Containers can be used to display content that requires scrolling when it exceeds the visible area.

When the total width/height of component content within a scrolling container exceeds the container's own width/height, scroll bars will appear, allowing users to view all content by sliding the scroll bars.

Note that you must set the width and height for the scrolling container, ensuring the content dimensions exceed those of the container itself, to enable the scrolling effect.

If only horizontal scrolling is required, ensure the scrolling container's width is less than the width of the content it contains.

If only vertical scrolling is required, ensure the scrolling container's height is less than the width of the content it contains.