fs-overlay Overlay Component

The overlay component is used to create a semi-transparent overlay that covers the entire screen. It is commonly used as the background for dialogs, drawers, and other components.

Usage

Local import. Configure it in the index.json of the page or component where it is needed.

"usingComponents": {
  "fs-overlay": "ava-ui/fxui/fs-overlay/index"
}

Code Demo

API

Properties

Property Name	Type	Default	Description
visible	Boolean	false	Whether to display the overlay
zIndex	Number	11000	Overlay z-index
backgroundColor	String	'rgba(0, 0, 0, 0.7)'	Overlay background color
duration	Number	300	Animation duration, in milliseconds
preventScrollThrough	Boolean	true	Whether to prevent scroll-through
closeOnOverlayClick	Boolean	true	Whether clicking the overlay triggers a close event
customStyle	String	''	Custom style
customClass	String	''	Custom style class name

Events

Event Name	Description	Callback Parameter
click	Triggered when the overlay is clicked (requires closeOnOverlayClick to be true)	-
enter	Triggered when the overlay enters	-
leave	Triggered when the overlay leaves	-

Slots

Slot Name	Description
default	Overlay content

Notes

1. Scroll-through: By default, the component prevents scroll-through. To allow it, set preventScrollThrough="{{false}}".
2. Event bubbling: Nested content should use catchtap to stop event bubbling and avoid accidentally triggering the overlay click event.
3. Z-index management: Set zIndex reasonably to avoid z-index conflicts.
4. Animation performance: The animation is based on wx.createAnimation, which may have performance issues on low-end devices.

打开预览