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

组件接收的外部传入的属性

属性名	属性标识	类型	说明

容器备注(PC端)	title	string	鼠标 hover 后的提示
数据	data	object	该属性用于区块动态项配置，可通过 $w..data 引用到 示例：{}

Event Introduction

组件暴露的事件，可以监听组件的事件来触发一些外部的动作

事件名	事件code	事件出参 event.detail	适用情况	说明

点击	tap		兼容三端	-
长按/contextmenu	longpress		兼容三端	-
触摸开始	touchstart		兼容三端	-
触摸后移动	touchmove		兼容三端	-
触摸取消	touchcancel		兼容三端	-
触摸结束	touchend		兼容三端	-

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.