Sard Uniapp

Appearance

在新窗口打开⤴

NoticeBar公告栏

介绍 ​

用于循环播放展示一组消息通知。

引入 ​

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隐藏左边图标booleanfalse
delay挂载后，延迟动画时间（单位 ms），避免进入页面时卡顿number1000
speed滚动速率 (px/s)number50
scrollable是否开启滚动播放，内容长度溢出时默认开启'auto' | 'never' | 'always''auto'
wrap是否开启文本换行booleanfalse
closable是否显示关闭按钮booleanfalse
linkable是否展示右侧箭头booleanfalse
visible是否显示公告栏booleantrue
vertical搭配 Swipe 组件实现垂直滚动booleanfalse

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;
}

Released under the MIT License.

Copyright © 2023-present wuzhitao