通告 Noticebar
使用 .aui-noticebar 做为外侧容器。使用 .aui-noticebar-main 来实现通告主体布局。.aui-noticebar-* 设置额外样式，详见示例：
提示️
通告内容横向或者纵向滚动需要借助轮播组件 swiper ，详见示例代码JS部分。
示例代码
<div class="aui-content">
<div class="content-top">
Noticebar通告栏组件多用于系统通知，广告通知等场景，可自定义图标，颜色，展现方式等。
</div>
<!-- 基础用法 -->
<div class="aui-card">
<div class="aui-card-title">
<span class="aui-card-title-line"></span>
基础用法
</div>
<div class="aui-card-main" style="padding: 10px 0;">
<div class="aui-noticebar">
<div class="aui-noticebar-main">
[单行]aui 是一套基于原生javascript开发的移动端UI组件库
</div>
</div>
<div class="aui-noticebar">
<div class="aui-noticebar-main">
[多行]aui 是一套基于原生javascript开发的移动端UI组件库，包含常用js方法、字符校验...
</div>
</div>
</div>
</div>
<!-- 加图标 -->
<div class="aui-card">
<div class="aui-card-title"><span class="aui-card-title-line"></span>加图标</div>
<div class="aui-card-main" style="padding: 10px 0;">
<div class="aui-noticebar">
<div class="aui-noticebar-main">
<div class="aui-noticebar-left"><i class="iconfont iconsystemprompt"></i></div>
<div class="aui-noticebar-center">
[单行]aui 是一套基于原生的移动端UI组件库
</div>
</div>
</div>
<div class="aui-noticebar">
<div class="aui-noticebar-main">
<div class="aui-noticebar-left"><i class="iconfont iconsystemprompt"></i></div>
<div class="aui-noticebar-center">
[多行]aui 是一套基于原生javascript开发的移动端UI组件库，包含常用js方法、字符校验...
</div>
</div>
</div>
</div>
</div>
<!-- 横向滚动 -->
<div class="aui-card">
<div class="aui-card-title"><span class="aui-card-title-line"></span>横向滚动</div>
<div class="aui-card-main" style="padding: 10px 0;">
<div class="aui-noticebar aui-noticebar-row">
<div class="aui-noticebar-main">
<div class="aui-noticebar-center">
<div class="aui-noticebar-texts">
<p class="aui-noticebar-text">aui 是一套基于原生javascript开发的移动端UI组件库</p>
<p class="aui-noticebar-text">包含常用js方法、字符校验、dialog提示弹窗</p>
<p class="aui-noticebar-text">数字键盘、侧滑菜单、时间选择器、多级联动、聊天UI、项目常用模板</p>
</div>
</div>
</div>
</div>
<div class="aui-noticebar aui-noticebar-row">
<div class="aui-noticebar-main">
<div class="aui-noticebar-left"><i class="iconfont iconsystemprompt"></i></div>
<div class="aui-noticebar-center">
<div class="aui-noticebar-texts">
<p class="aui-noticebar-text">aui 是一套基于原生javascript开发的移动端UI组件库</p>
<p class="aui-noticebar-text">包含常用js方法、字符校验、dialog提示弹窗</p>
<p class="aui-noticebar-text">数字键盘、侧滑菜单、时间选择器、多级联动、聊天UI、项目常用模板</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 纵向滚动 -->
<div class="aui-card">
<div class="aui-card-title"><span class="aui-card-title-line"></span>纵向滚动</div>
<div class="aui-card-main" style="padding: 10px 0;">
<div class="aui-noticebar aui-noticebar-col">
<div class="aui-noticebar-main">
<div class="aui-noticebar-center">
<div class="aui-noticebar-texts">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<p class="aui-noticebar-text">aui 是一套基于原生javascript开发的移动端UI组件库</p>
</div>
<div class="swiper-slide">
<p class="aui-noticebar-text">aui 是一套基于原生javascript开发的移动端UI组件库</p>
</div>
<div class="swiper-slide">
<p class="aui-noticebar-text">aui 是一套基于原生javascript开发的移动端UI组件库</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="aui-noticebar aui-noticebar-col">
<div class="aui-noticebar-main">
<div class="aui-noticebar-left"><i class="iconfont iconsystemprompt"></i></div>
<div class="aui-noticebar-center">
<div class="aui-noticebar-texts">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<p class="aui-noticebar-text">aui 是一套基于原生javascript开发的移动端UI组件库</p>
</div>
<div class="swiper-slide">
<p class="aui-noticebar-text">aui 是一套基于原生javascript开发的移动端UI组件库</p>
</div>
<div class="swiper-slide">
<p class="aui-noticebar-text">aui 是一套基于原生javascript开发的移动端UI组件库</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// 纵横向滚动需要借助swiper轮播图
var swiper = new Swiper('.swiper-container', {
slidesPerView: 'auto',
autoplay: 1500,
direction: 'vertical',
grabCursor: true,
autoplayDisableOnInteraction: false,
mousewheelControl: true,
autoHeight: true,
speed: 1000,
loop: true
})
</script>