Skip to main content

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)titlestring

prompt on mouse hover

Data. dataobject

The property is used for block dynamic item configuration and can be referenced via $w..data

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
clicktapCompatible with all platforms

-

long-presslongpressCompatible with all platforms

-

Touch StarttouchstartCompatible with all platforms

-

Touch and movetouchmoveCompatible with all platforms

-

Touch CanceltouchcancelCompatible with all platforms

-

Touch EndtouchendCompatible 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 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.