介绍
用于循环播放展示一组消息通知。
引入
js
import NoticeBar from 'sard-uniapp/components/notice-bar/notice-bar.vue'代码演示
基础使用
公告栏的内容长度溢出时会自动开启滚动播放。
vue
<template>
<sar-notice-bar>这是一条公告!</sar-notice-bar>
<sar-notice-bar>
这是一条很长很长很长很长很长很长很长很长很长很长的公告!
</sar-notice-bar>
</template>异步数据
NoticeBar 组件是通过 animation 来实现高效的滚动动画的, 会根据内容宽度动态设置动画时长,以实现固定速率滚动。
INFO
在 1.20之前, 如果 NoticeBar 挂载时机比插槽内容靠前,即插槽内容数据需要通过接口异步获取再渲染的, 需要手动调用 update 方法来更新动画时长。
在 1.20之后,会监听内容尺寸变化,自动调用更新方法,无需手动调用。
vue
<template>
<sar-notice-bar>
{{ text }}
</sar-notice-bar>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
const text = ref('')
onMounted(() => {
setTimeout(() => {
text.value = '这是一条很长很长很长很长很长很长很长很长很长很长的公告!'
}, 1500)
})
</script>vue
<template>
<sar-notice-bar>
{{ text }}
</sar-notice-bar>
</template>
<script setup lang="js">
import { onMounted, ref } from "vue";
const text = ref("");
onMounted(() => {
setTimeout(() => {
text.value = "\u8FD9\u662F\u4E00\u6761\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u7684\u516C\u544A\uFF01";
}, 1500);
});
</script>强制滚动
设置 scrollable="always" 属性时,无论公告栏内容多少都会滚动。
vue
<template>
<sar-notice-bar scrollable="always">这是一条公告!</sar-notice-bar>
<sar-notice-bar scrollable="always">
这是一条很长很长很长很长很长很长很长很长很长很长的公告!
</sar-notice-bar>
</template>强制不滚动
设置 scrollable="never" 属性时,无论公告栏内容多少都不会滚动。
vue
<template>
<sar-notice-bar scrollable="never">这是一条公告!</sar-notice-bar>
<sar-notice-bar scrollable="never">
这是一条很长很长很长很长很长很长很长很长很长很长的公告!
</sar-notice-bar>
</template>多行展示
默认文本不换行,设置 wrap 可以使其换行。
vue
<template>
<sar-notice-bar wrap>
这是一条很长很长很长很长很长很长很长很长很长很长的公告!
</sar-notice-bar>
</template>自定义左边图标
设置 leftIcon 插槽可以自定义左边的图标;或者设置 hideLeftIcon 属性隐藏左侧图标。
vue
<template>
<sar-notice-bar>
<template #left-icon>
<sar-icon family="demo-icons" name="bell" size="32rpx" />
</template>
这是一条很长很长很长很长很长很长很长很长很长很长的公告!
</sar-notice-bar>
<sar-notice-bar hideLeftIcon>
这是一条很长很长很长很长很长很长很长很长很长很长的公告!
</sar-notice-bar>
<sar-notice-bar>
<template #left-icon>
<text style="font-size: 32rpx">消息:</text>
</template>
这是一条很长很长很长很长很长很长很长很长很长很长的公告!
</sar-notice-bar>
</template>可关闭的
设置 closable 属性可以在右边显示关闭按钮。
vue
<template>
<sar-notice-bar closable @close="onClick">
这是一条很长很长很长很长很长很长很长很长很长很长的公告!
</sar-notice-bar>
</template>
<script setup lang="ts">
import { toast } from 'sard-uniapp'
const onClick = () => {
toast('close')
}
</script>vue
<template>
<sar-notice-bar closable @close="onClick">
这是一条很长很长很长很长很长很长很长很长很长很长的公告!
</sar-notice-bar>
</template>
<script setup lang="js">
import { toast } from "sard-uniapp";
const onClick = () => {
toast("close");
};
</script>可链接的
设置 linkable 属性可以在右边显示箭头。
vue
<template>
<sar-notice-bar linkable @click="onClick">
这是一条很长很长很长很长很长很长很长很长很长很长的公告!
</sar-notice-bar>
</template>
<script setup lang="ts">
import { toast } from 'sard-uniapp'
const onClick = () => {
toast('navigate to')
}
</script>vue
<template>
<sar-notice-bar linkable @click="onClick">
这是一条很长很长很长很长很长很长很长很长很长很长的公告!
</sar-notice-bar>
</template>
<script setup lang="js">
import { toast } from "sard-uniapp";
const onClick = () => {
toast("navigate to");
};
</script>自定义右边图标
设置 rightIcon 插槽可以修改右边的关闭按钮图标或者箭头图标。
vue
<template>
<sar-notice-bar closable>
这是一条很长很长很长很长很长很长很长很长很长很长的公告!
<template #right-icon>
<sar-icon name="x-circle-fill" />
</template>
</sar-notice-bar>
</template>自定义样式
通过 color 属性设置文本颜色,通过 background 属性设置背景色。
vue
<template>
<sar-notice-bar
color="var(--sar-primary)"
background="rgba(var(--sar-primary-rgb), 0.1)"
>
这是一条很长很长很长很长很长很长很长很长很长很长的公告!
</sar-notice-bar>
</template>垂直滚动
搭配 NoticeBar 和 Swipe 组件,可以实现垂直滚动的效果。
vue
<template>
<sar-notice-bar vertical>
<swiper autoplay vertical :interval="1500" circular style="height: 80rpx">
<swiper-item>
<view class="swipe-item">1. 这是一条公告!</view>
</swiper-item>
<swiper-item>
<view class="swipe-item">2. 这是一条公告!</view>
</swiper-item>
<swiper-item>
<view class="swipe-item">3. 这是一条公告!</view>
</swiper-item>
</swiper>
</sar-notice-bar>
</template>
<style lang="scss">
.swipe-item {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
</style>API
NoticeBarProps
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| root-class | 组件根元素类名 | string | - |
| root-style | 组件根元素样式 | StyleValue | - |
| color | 自定义颜色 | string | - |
| background | 自定义背景色 | string | - |
| hide-left-icon | 隐藏左边图标 | boolean | false |
| delay | 挂载后,延迟动画时间(单位 ms),避免进入页面时卡顿 | number | 1000 |
| speed | 滚动速率 (px/s) | number | 50 |
| scrollable | 是否开启滚动播放,内容长度溢出时默认开启 | 'auto' | 'never' | 'always' | 'auto' |
| wrap | 是否开启文本换行 | boolean | false |
| closable | 是否显示关闭按钮 | boolean | false |
| linkable | 是否展示右侧箭头 | boolean | false |
| visible | 是否显示公告栏 | boolean | true |
| vertical | 搭配 Swipe 组件实现垂直滚动 | boolean | false |
NoticeBarSlots
| 插槽 | 描述 | 属性 |
|---|---|---|
| default | 自定义默认内容 | - |
| left-icon | 自定义左侧图标内容 | - |
| right-icon | 自定义右侧图标内容 | - |
NoticeBarEmits
| 事件 | 描述 | 类型 |
|---|---|---|
| click | 点击公告栏时触发 | (event: any) => void |
| close | 点击关闭按钮时触发 | () => void |
NoticeBarExpose
| 属性 | 描述 | 类型 |
|---|---|---|
| update | 重置滚动时长 | () => void |
主题定制
CSS 变量
scss
page,
.sar-portal {
--sar-notice-bar-min-height: 80rpx;
--sar-notice-bar-padding-x: 32rpx;
--sar-notice-bar-padding-y: 20rpx;
--sar-notice-bar-font-size: var(--sar-text-base);
--sar-notice-bar-color: var(--sar-orange);
--sar-notice-bar-bg: rgba(var(--sar-yellow-rgb), 0.1);
--sar-notice-bar-wrap-line-height: var(--sar-leading-snug);
--sar-notice-bar-left-icon-size: 40rpx;
--sar-notice-bar-left-icon-margin-right: 16rpx;
--sar-notice-bar-right-icon-padding: 20rpx;
--sar-notice-bar-right-icon-size: 32rpx;
--sar-notice-bar-right-icon-margin-left: 0;
--sar-notice-bar-right-icon-margin-right: -20rpx;
}