NoticeBar通造栏一般会出现在顶部或者是比较显眼的地方，目的就是引大家的注意。
准备工作：
- 创建一个页面:NoticeBar.vue
- 在router.js里配置NoticeBar页面的路由
{
path: '/noticebar',
name: 'noticebar',
component: () => import('./views/NoticeBar.vue')
}
- 在index.vue里添加一项
<a href="javascript:void(0)" @click="$router.push('/noticebar')">
<van-col span="6" class="marb20">
<van-icon name="pending-deliver" />
<div>NoticeBar</div>
</van-col>
</a>
至今为止呢，我们的首页显示的样式子是这样滴?不知道不觉间我们已经学完了36个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。
代码演示NoticeBar 通告栏：
基础用法：
<van-notice-bar text="公司最近开发了一款app，采用了混合式开发模式，由于时间比较紧张，所以h5页面我们采用了vue+vantUI框架来开发h5页面。下面就记录一下开发过程中的一些踩坑之旅。" left-icon="volume-o" />
右侧显示关闭图标
<van-notice-bar mode="closeable" text="公司最近开发了一款app，采用了混合式开发模式，由于时间比较紧张，所以h5页面我们采用了vue+vantUI框架来开发h5页面。下面就记录一下开发过程中的一些踩坑之旅。" left-icon="volume-o" />
如果想让关闭起作用，当然是触发click事件：
<van-notice-bar
v-show="isShow"
mode="closeable"
text="公司最近开发了一款app，采用了混合式开发模式，由于时间比较紧张，所以h5页面我们采用了vue+vantUI框架来开发h5页面。下面就记录一下开发过程中的一些踩坑之旅。"
left-icon="volume-o"
@click="onClick"
/>
data() {
return {
isShow: true
}
},
methods: {
onClick() {
this.isShow = false
},
}
右侧显示箭头：
<van-notice-bar v-show="isShow" mode="link" text="公司最近开发了一款app，采用了混合式开发模式，由于时间比较紧张，所以h5页面我们采用了vue+vantUI框架来开发h5页面。下面就记录一下开发过程中的一些踩坑之旅。" left-icon="volume-o" @click="onClick" />
mode:通告栏模式，通常有两种模式：closeable, link，就是上面我们介绍的两种模式。
left-icon：设置左侧小图标。
speed：滚动速度
到目前为止呢，NoticeBar 通告栏就演示完了！庆祝一下我们又学完一个组件啦！
今天就到这里啦。休息休息一会儿吧?明天继续加油噢！加油