uView Pro X

简体中文

English

简体中文

English

主题

NoticeBar 通告栏 ​

17:06

说明 ​

滚动展示通知、公告等内容，内容由 list 数组提供，支持 success/error/primary/info/warning/none 主题、自定义文字与背景色、左右图标与关闭按钮，play-state 控制播放与暂停。水平方向默认采用无缝衔接滚动，垂直方向用 swiper 逐条切换，二者分别由内部的 ux-row-notice 与 ux-column-notice 承载。

兼容性 ​

平台支持情况
App✅ 支持
H5✅ 支持
微信小程序✅ 支持

示例 ​

水平 - 基础用法 ​

通过 list 数组配置滚动内容，默认 warning 主题，水平左右滚动。

查看源码
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>

水平 - 配置主题 ​

通过 type 配置 success/error/primary/info/warning/none 主题。

查看源码
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>

水平 - 配置图标 ​

volume-icon 左侧喇叭，more-icon 右侧箭头，close-icon 右侧关闭。

查看源码
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>

水平 - 自定义颜色 ​

通过 color/bg-color 自定义文字和图标的颜色、背景颜色。

查看源码
vue
<template>
    <ux-notice-bar color="#2979ff" bg-color="#ecf5ff" :list="list"></ux-notice-bar>
</template>

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

水平 - 控制滚动 ​

autoplay 控制是否自动播放，play-state 控制播放/暂停，speed 控制速度。

查看源码
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>

垂直 - 基础用法 ​

通过 list 数组配置滚动内容，默认 warning 主题，垂直上下滚动。

查看源码
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>

垂直 - 配置主题 ​

通过 type 配置 success/primary/info/none 主题。

查看源码
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>

垂直 - 配置图标 ​

volume-icon 左侧喇叭，more-icon 右侧箭头，close-icon 右侧关闭。

查看源码
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>

垂直 - 自定义颜色 ​

通过 color/bg-color 自定义文字和图标的颜色、背景颜色。

查看源码
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>

垂直 - 控制滚动 ​

play-state 控制播放/暂停，duration 控制滚动周期，disable-touch 禁止手滑。

查看源码
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 ​

属性说明类型默认值版本
customStyle自定义根节点样式UTSJSONObject--
customClass自定义根节点样式类string''-
list滚动内容，数组形式string[]--
type显示主题，success/error/primary/info/warning/noneThemeType | 'none''warning'-
volumeIcon是否显示左侧喇叭图标booleantrue-
volumeSize左侧喇叭图标大小，单位pxnumber | string17-
moreIcon是否显示右侧向右箭头booleanfalse-
closeIcon是否显示右侧关闭图标booleanfalse-
autoplay是否自动播放（当前未转发给内部子组件）booleantrue-
color文字颜色，各图标也使用该颜色string''-
bgColor背景颜色string''-
mode滚动方向，horizontal-水平，vertical-垂直Direction'horizontal'-
show是否显示booleantrue-
fontSize字体大小，单位pxnumber | string14-
duration每条内容的切换周期，单位ms（仅 swiper 模式生效）number | string2000-
speed水平无缝滚动的速度，每秒滚动多少px（仅水平无缝模式生效）number | string80-
isCircular是否开启水平无缝衔接滚动（仅水平方向生效）booleantrue-
playState播放状态，play-播放，paused-暂停PlayState'play'-
disableTouch是否禁止手动滑动切换（仅 swiper 模式生效）booleantrue-
borderRadius圆角，单位px（大于 0 时生效）number | string0-
padding内边距number | string'9px 12px'-
noListHiddenlist 为空时是否隐藏booleantrue-

Events ​

事件名说明回调参数版本
click点击通告文字触发，index 为内容下标（水平无缝模式恒为 0）index: number-
close点击关闭图标触发--
getMore点击右侧更多箭头触发--
end滚动到最后一条内容时触发（仅 swiper 模式）--

Slots ​

ux-notice-bar 无插槽。

注意事项 ​

  1. 内部实现由 mode 与 isCircular 决定：mode='horizontal' 且 isCircular=true 时用 ux-row-notice 做无缝衔接滚动，其余情况（isCircular=false 的水平、以及 mode='vertical'）用 ux-column-notice 的 swiper 逐条切换。
  2. isCircular 只在水平方向生效，垂直方向固定走 swiper。
  3. 水平无缝模式会把 list 用中文逗号「，」拼成一条连续文本滚动，click 回调的 index 恒为 0；只有 swiper 模式才按条展示并回传真实下标。
  4. 无缝滚动仅在单条文本宽度超过容器宽度时才会滚动，内容较短时保持静止。
  5. speed 仅水平无缝模式生效，duration 与 disableTouch 仅 swiper 模式生效，不要混用。
  6. end 仅在 swiper 模式滚动到最后一条时触发。
  7. autoplay 当前未转发给内部子组件，暂停请改用 play-state='paused'。
  8. type='none' 时无背景（透明），文字取 content 色；其余主题使用浅色背景加主题色文字。
  9. noListHidden 默认 true，list 为空时整个组件隐藏；show=false 同样会隐藏。
Copyright © 2026 uView Pro X | 鲁ICP备2021040594号-5