NoticeBar

17:06

Description

Scrolls notifications, announcements, etc. Content comes from the list array and supports success/error/primary/info/warning/none themes, custom text/background colors, left/right icons and a close button, with play-state toggling play and pause. Horizontal mode uses seamless scrolling by default, while vertical mode switches items one by one via a swiper; the two are handled internally by ux-row-notice and ux-column-notice respectively.

Compatibility

Platform	Support
App	✅ Supported
H5	✅ Supported
WeChat Mini Program	✅ Supported

Examples

Horizontal - Basic Usage

Configure the scrolling content via the list array; defaults to the warning theme and scrolls horizontally.

View source

vue

<template>
    <ux-notice-bar :list="list" @click="onClick"></ux-notice-bar>
</template>

<script setup lang="uts">
const list = ['这是一条重要的公告消息', '今天下午三点召开项目评审会议', '系统将于本周六凌晨进行升级维护', '新版本组件库已发布，欢迎体验'];

function onClick(): void {
    uni.showToast({ title: '点击了通知', icon: 'none' });
}
</script>

Horizontal - Configure Theme

Configure success/error/primary/info/warning/none themes via type.

View source

vue

<template>
    <ux-notice-bar type="primary" :list="list"></ux-notice-bar>
    <view class="gap"></view>
    <ux-notice-bar type="success" :list="list"></ux-notice-bar>
    <view class="gap"></view>
    <ux-notice-bar type="error" :list="list"></ux-notice-bar>
    <view class="gap"></view>
    <ux-notice-bar type="info" :list="list"></ux-notice-bar>
    <view class="gap"></view>
    <ux-notice-bar type="none" :list="list"></ux-notice-bar>
</template>

<script setup lang="uts">
const list = ['这是一条重要的公告消息', '今天下午三点召开项目评审会议', '系统将于本周六凌晨进行升级维护', '新版本组件库已发布，欢迎体验'];
</script>

<style scoped>
.gap {
    height: 12px;
}
</style>

Horizontal - Configure Icons

volume-icon is the speaker on the left, more-icon is the arrow on the right, and close-icon is the close button on the right.

View source

vue

<template>
    <ux-notice-bar :volume-icon="false" :list="list"></ux-notice-bar>
    <view class="gap"></view>
    <ux-notice-bar :more-icon="true" :list="list" @get-more="onGetMore"></ux-notice-bar>
    <view class="gap"></view>
    <ux-notice-bar :close-icon="true" :list="list" @close="onClose"></ux-notice-bar>
</template>

<script setup lang="uts">
const list = ['这是一条重要的公告消息', '今天下午三点召开项目评审会议', '系统将于本周六凌晨进行升级维护', '新版本组件库已发布，欢迎体验'];

function onGetMore(): void {
    uni.showToast({ title: '点击了更多', icon: 'none' });
}

function onClose(): void {
    uni.showToast({ title: '关闭了通知', icon: 'none' });
}
</script>

<style scoped>
.gap {
    height: 12px;
}
</style>

Horizontal - Custom Color

Customize the text/icon color and background color via color/bg-color.

View source

vue

<template>
    <ux-notice-bar color="#2979ff" bg-color="#ecf5ff" :list="list"></ux-notice-bar>
</template>

<script setup lang="uts">
const list = ['这是一条重要的公告消息', '今天下午三点召开项目评审会议', '系统将于本周六凌晨进行升级维护', '新版本组件库已发布，欢迎体验'];
</script>

Horizontal - Control Scrolling

autoplay controls auto-play, play-state controls play/pause, and speed controls the speed.

View source

vue

<template>
    <ux-notice-bar :speed="200" :list="list"></ux-notice-bar>
    <view class="gap"></view>
    <ux-notice-bar :play-state="playState" :list="list"></ux-notice-bar>
    <view class="gap"></view>
    <view class="btn" @click="onToggle">
        <text class="btn-text">{{ playing ? '暂停' : '播放' }}</text>
    </view>
</template>

<script setup lang="uts">
const list = ['这是一条重要的公告消息', '今天下午三点召开项目评审会议', '系统将于本周六凌晨进行升级维护', '新版本组件库已发布，欢迎体验'];

const playing = ref<boolean>(true);
const playState = ref<string>('play');

function onToggle(): void {
    playing.value = !playing.value;
    playState.value = playing.value ? 'play' : 'paused';
}
</script>

<style scoped>
.gap {
    height: 12px;
}
.btn {
    background-color: #2979ff;
    border-radius: 4px;
    padding-top: 8px;
    padding-right: 16px;
    padding-bottom: 8px;
    padding-left: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.btn-text {
    font-size: 14px;
    color: #ffffff;
}
</style>

Vertical - Basic Usage

Configure the scrolling content via the list array; defaults to the warning theme and scrolls vertically.

View source

vue

<template>
    <ux-notice-bar mode="vertical" :list="list" @click="onClick"></ux-notice-bar>
</template>

<script setup lang="uts">
const list = ['这是一条重要的公告消息', '今天下午三点召开项目评审会议', '系统将于本周六凌晨进行升级维护', '新版本组件库已发布，欢迎体验'];

function onClick(): void {
    uni.showToast({ title: '点击了通知', icon: 'none' });
}
</script>

Vertical - Configure Theme

Configure success/primary/info/none themes via type.

View source

vue

<template>
    <ux-notice-bar mode="vertical" type="primary" :list="list"></ux-notice-bar>
    <view class="gap"></view>
    <ux-notice-bar mode="vertical" type="success" :list="list"></ux-notice-bar>
    <view class="gap"></view>
    <ux-notice-bar mode="vertical" type="info" :list="list"></ux-notice-bar>
    <view class="gap"></view>
    <ux-notice-bar mode="vertical" type="none" :list="list"></ux-notice-bar>
</template>

<script setup lang="uts">
const list = ['这是一条重要的公告消息', '今天下午三点召开项目评审会议', '系统将于本周六凌晨进行升级维护', '新版本组件库已发布，欢迎体验'];
</script>

<style scoped>
.gap {
    height: 12px;
}
</style>

Vertical - Configure Icons

volume-icon is the speaker on the left, more-icon is the arrow on the right, and close-icon is the close button on the right.

View source

vue

<template>
    <ux-notice-bar mode="vertical" :volume-icon="false" :list="list"></ux-notice-bar>
    <view class="gap"></view>
    <ux-notice-bar mode="vertical" :more-icon="true" :list="list" @get-more="onGetMore"></ux-notice-bar>
    <view class="gap"></view>
    <ux-notice-bar mode="vertical" :close-icon="true" :list="list" @close="onClose"></ux-notice-bar>
</template>

<script setup lang="uts">
const list = ['这是一条重要的公告消息', '今天下午三点召开项目评审会议', '系统将于本周六凌晨进行升级维护', '新版本组件库已发布，欢迎体验'];

function onGetMore(): void {
    uni.showToast({ title: '点击了更多', icon: 'none' });
}

function onClose(): void {
    uni.showToast({ title: '关闭了通知', icon: 'none' });
}
</script>

<style scoped>
.gap {
    height: 12px;
}
</style>

Vertical - Custom Color

Customize the text/icon color and background color via color/bg-color.

View source

vue

<template>
    <ux-notice-bar mode="vertical" color="#2979ff" bg-color="#ecf5ff" :list="list"></ux-notice-bar>
</template>

<script setup lang="uts">
const list = ['这是一条重要的公告消息', '今天下午三点召开项目评审会议', '系统将于本周六凌晨进行升级维护', '新版本组件库已发布，欢迎体验'];
</script>

Vertical - Control Scrolling

play-state controls play/pause, duration controls the scroll cycle, and disable-touch prevents manual swiping.

View source

vue

<template>
    <ux-notice-bar mode="vertical" :play-state="playState" :list="list"></ux-notice-bar>
    <view class="gap"></view>
    <ux-notice-bar mode="vertical" :duration="4000" :list="list"></ux-notice-bar>
    <view class="gap"></view>
    <ux-notice-bar mode="vertical" :disable-touch="false" :list="list" @end="onEnd"></ux-notice-bar>
    <view class="gap"></view>
    <view class="btn" @click="onToggle">
        <text class="btn-text">{{ playing ? '暂停' : '播放' }}</text>
    </view>
</template>

<script setup lang="uts">
const list = ['这是一条重要的公告消息', '今天下午三点召开项目评审会议', '系统将于本周六凌晨进行升级维护', '新版本组件库已发布，欢迎体验'];

const playing = ref<boolean>(true);
const playState = ref<string>('play');

function onToggle(): void {
    playing.value = !playing.value;
    playState.value = playing.value ? 'play' : 'paused';
}

function onEnd(): void {
    uni.showToast({ title: '轮播结束', icon: 'none' });
}
</script>

<style scoped>
.gap {
    height: 12px;
}
.btn {
    background-color: #2979ff;
    border-radius: 4px;
    padding-top: 8px;
    padding-right: 16px;
    padding-bottom: 8px;
    padding-left: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.btn-text {
    font-size: 14px;
    color: #ffffff;
}
</style>

API

Props

Property	Description	Type	Default	Version
`customStyle`	Custom style for the root node	`UTSJSONObject`	`-`	-
`customClass`	Custom class for the root node	`string`	`''`	-
`list`	Scrolling content, as an array	`string[]`	`-`	-
`type`	Theme: success/error/primary/info/warning/none	`ThemeType \| 'none'`	`'warning'`	-
`volumeIcon`	Whether to show the speaker icon on the left	`boolean`	`true`	-
`volumeSize`	Size of the left speaker icon, in px	`number \| string`	`17`	-
`moreIcon`	Whether to show the arrow icon on the right	`boolean`	`false`	-
`closeIcon`	Whether to show the close icon on the right	`boolean`	`false`	-
`autoplay`	Whether to auto-play (currently not forwarded to the inner child components)	`boolean`	`true`	-
`color`	Text color; the icons use it as well	`string`	`''`	-
`bgColor`	Background color	`string`	`''`	-
`mode`	Scroll direction: horizontal / vertical	`Direction`	`'horizontal'`	-
`show`	Whether to show the component	`boolean`	`true`	-
`fontSize`	Font size, in px	`number \| string`	`14`	-
`duration`	Switch interval per item, in ms (swiper mode only)	`number \| string`	`2000`	-
`speed`	Seamless horizontal scroll speed, in px per second (horizontal seamless mode only)	`number \| string`	`80`	-
`isCircular`	Whether to enable seamless horizontal scrolling (horizontal direction only)	`boolean`	`true`	-
`playState`	Playback state: play / paused	`PlayState`	`'play'`	-
`disableTouch`	Whether to disable manual swipe switching (swiper mode only)	`boolean`	`true`	-
`borderRadius`	Corner radius, in px (applied when greater than 0)	`number \| string`	`0`	-
`padding`	Inner padding	`number \| string`	`'9px 12px'`	-
`noListHidden`	Whether to hide when list is empty	`boolean`	`true`	-

Events

Event	Description	Params	Version
`click`	Emitted when the notice text is tapped; index is the item index (always 0 in horizontal seamless mode)	`index: number`	-
`close`	Emitted when the close icon is tapped	-	-
`getMore`	Emitted when the right more arrow is tapped	-	-
`end`	Emitted when scrolling reaches the last item (swiper mode only)	-	-

Slots

ux-notice-bar has no slots.

Notes

The internal implementation depends on mode and isCircular: with mode='horizontal' and isCircular=true it uses ux-row-notice for seamless scrolling; otherwise (isCircular=false horizontal, or mode='vertical') it uses the swiper inside ux-column-notice to switch items one by one.
isCircular only takes effect in the horizontal direction; vertical always uses the swiper.
Horizontal seamless mode joins list into one continuous string with a Chinese comma "，" and scrolls it; the click callback index is always 0. Only swiper mode shows items one by one and returns the real index.
Seamless scrolling only runs when a single text's width exceeds the container width; short content stays static.
speed works only in horizontal seamless mode, while duration and disableTouch work only in swiper mode; do not mix them.
end fires only in swiper mode when scrolling reaches the last item.
autoplay is currently not forwarded to the inner child components; use play-state='paused' to pause instead.
With type='none' there is no background (transparent) and the text uses the content color; other themes use a light background with theme-colored text.
noListHidden defaults to true, so the whole component is hidden when list is empty; show=false also hides it.

NoticeBar ​

Description ​

Compatibility ​

Examples ​

Horizontal - Basic Usage ​

Horizontal - Configure Theme ​

Horizontal - Configure Icons ​

Horizontal - Custom Color ​

Horizontal - Control Scrolling ​

Vertical - Basic Usage ​

Vertical - Configure Theme ​

Vertical - Configure Icons ​

Vertical - Custom Color ​

Vertical - Control Scrolling ​

API ​

Props ​

Events ​

Slots ​

Notes ​

NoticeBar

Description

Compatibility

Examples

Horizontal - Basic Usage

Horizontal - Configure Theme

Horizontal - Configure Icons

Horizontal - Custom Color

Horizontal - Control Scrolling

Vertical - Basic Usage

Vertical - Configure Theme

Vertical - Configure Icons

Vertical - Custom Color

Vertical - Control Scrolling

API

Props

Events

Slots

Notes