General Container
Container
Applicable Scenarios
Can accommodate multiple components and is commonly used for managing and controlling component layouts.
Extended Scenarios Description
Using General Container for Unified Control of Component Styles
General Containers are often used as parent nodes for other components. When the style properties of a General Container are modified, the components of its child nodes will be modified accordingly.
Property Introduction
External properties received by the component
Property Name | Property Identifier | Type | Description |
|---|
| Container remarks(PC) | title | string | prompt on mouse hover |
| Data. | data | object | The property is used for block dynamic item configuration and can be referenced via $w. Example: {} |
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 |
|---|
| click | tap | Compatible with all platforms | - | |
| long-press | longpress | Compatible with all platforms | - | |
| Touch Start | touchstart | Compatible with all platforms | - | |
| Touch and move | touchmove | Compatible with all platforms | - | |
| Touch Cancel | touchcancel | Compatible with all platforms | - | |
| Touch End | touchend | Compatible with all platforms | - |
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.