FullScreen

17:06

Description

A full-screen upgrade prompt that opens automatically when mounted. Built on ux-modal, it covers the navbar and bottom tabbar to present release notes. Both cancel and confirm call uni.navigateBack(), so it works best as a standalone page shown after an update.

Compatibility

Platform	Support
App	✅ Supported
H5	✅ Supported (requires page stack)
WeChat Mini Program	✅ Supported (requires page stack)

Examples

Basic Usage

Mounting the component pops it up automatically; the title falls back to the library default; cancel or confirm calls navigateBack.

View source

<template>
    <ux-button type="primary" shape="round" text="触发升级弹窗" @click="open" />
    <ux-full-screen v-if="visible" :show="false" content="本次更新优化了启动速度，修复了若干已知问题。" />
</template>

<script setup lang="uts">
const visible = ref(false);

const open = () => {
    visible.value = true;
};
</script>

Custom Title

Override the default title via title; content shows the upgrade details.

View source

<template>
    <ux-button type="warning" shape="round" text="自定义标题弹窗" @click="open" />
    <ux-full-screen v-if="visible" title="重要更新" content="v1.1.0 新增多主题与暗黑模式支持，优化了大数据量渲染性能。" />
</template>

<script setup lang="uts">
const visible = ref(false);

const open = () => {
    visible.value = true;
};
</script>

API

Props

Property	Description	Type	Default	Version
customStyle	Custom style for the root node	String	''	-
customClass	Custom class for the root node	String	''	-
show	Whether to show the modal. Defaults to false; it is set to visible on mount	Boolean	false	-
title	Modal title; falls back to the localized default	String	''	-
content	Upgrade content. Defaults to empty	String	''	-

Events

ux-full-screen has no events.

Slots

ux-full-screen has no slots.

Notes

1. The component shows itself as soon as it is mounted; show is read only during initialization, and changing it later does not update the modal — remount it (for example with v-if) to show it again.
2. Both cancel and confirm call uni.navigateBack() and emit no events; handle the difference at the page or wrapper level if you need distinct actions.
3. Mount it as a standalone page (a routed page or v-if); navigateBack() has no effect when the page stack is empty.
4. An omitted title resolves to the localized uFullScreen.title, and the confirm button uses uFullScreen.upgrade; an empty content shows the title only.
5. On H5 / Mini Program, opening the page directly without a previous page makes the back action fail, so make sure a page stack exists before entering.