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:
- Drag a Scrolling Container component and set its height to 300
- 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) | scrollIntoView | string | This feature is not supported in mini programs currently. Scroll the current element into the viewable area of the browser window |
| horizontal scroll bar position | scrollLeft | number | Input default value, the horizontal scroll bar will move to the position by default |
| vertical scroll position | scrollTop | number | Input default value, the vertical scroll bar will move to the location by default |
| Trigger scrolltolower event when distance from bottom/right is reached | lowerThreshold | number | Example: 50 |
| How far from the top/left to trigger the scrolltoupper event | upperThreshold | number | Example: 50 |
| Control scrollbar visibility(Mini Program) | showScrollbar | boolean | 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) | enhanced | boolean | Enable scroll-view enhanced feature Example: false |
| Elastic control of scroll-view boundary on iOS(Mini Program) | bounces | boolean | Example: true |
| Paginate slide effect(Mini Program) | pagingEnabled | boolean | Example: false |
| Sliding deceleration rate control(Mini Program) | fastDeceleration | boolean | Example: false |
| enable pull-down refresh(Mini Program) | refresherEnabled | boolean | Enabled, you can customize pull-down refresh settings Example: false |
| Set custom pull-down refresh threshold(Mini Program) | refresherThreshold | number | Example: 50 |
| Set custom pull-down refresh default style(Mini Program) | refresherDefaultStyle | string | Example: "block" |
| Set custom pull-down refresh area background color(Mini Program) | refresherBackground | string | Example: "#fff" |
| Set current dropdown refresh status(Mini Program) | refresherTriggered | boolean | Example: false |
| Enable scroll anchoring feature(Mini Program) | scrollAnchoring | boolean | Enable scroll-anchoring feature Example: false |
| Enable flexbox layout(Mini Program) | enableFlex | boolean | 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) | enableBackToTop | boolean | 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) | scrollWithAnimation | boolean | Enable scrollbar animation Example: false |
| Enable horizontal scroll | scrollX | boolean | When enabled, the horizontal scroll bar will be activated, and the component supports scrolling left and right. Example: false |
| Vertically scrollable | scrollY | boolean | 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 scroll | scroll | Compatible with all platforms | - | |
| Trigger on scroll to bottom/right | scrolltolower | Compatible with all platforms | - | |
| Trigger on scroll to top/left | scrolltoupper | Compatible with all platforms | - | |
| Slide start event (Enable enhanced property simultaneously to take effect) | dragstart | Mini Program | - | |
| sliding event (enable simultaneously with enhanced property to take effect) | dragging | Mini Program | - | |
| Sliding end event (Enable enhanced property simultaneously to take effect) | dragend | Mini Program | - | |
| Custom pull-down refresh control was scrolled down | refresherpulling | Mini Program | - | |
| Custom pull-down refresh triggered | refresherrefresh | Mini Program | - | |
| Custom pull-down refresh was reset | refresherrestore | Mini Program | - | |
| Custom pull-down refresh terminated | refresherabort | Mini 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
Viewin mini-programs anddivin 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
ScrollViewin 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.