微信小程序公告向上滚动

相信大家在做小程序的时候，应该都会做一个滚动的公告吧，今天教大家做一个上下滚动的公告，先上图：


代码：
wxml:

<!--公告-->
<view class="notice_box">
<view class="notice">
      <image src="/Icon/index_icon/notice.png"></image>
  </view>
<view class="swiper_box">
  <swiper 
       
       vertical="true"
      autoplay="true" 
      circular="true"
      interval="3000"
      duration='300'
    >
    <block wx:for='{{msgList}}' wx:key='index'>
        <swiper-item>
          <view class="swiper-item">{{item.title}}</view>
        </swiper-item>
    </block>
  </swiper>
  </view> 
</view>

wxss:

/*
*公告栏
*/
.notice_box{
  margin:   0 20rpx;
  display: flex;
  flex-direction: row;
  height: 80rpx;
  background-color: white;
}
  .notice{
    padding: 0 20rpx;
    display: flex;
    align-items: center;
  }
.notice image{
  width: 60rpx;
  height: 60rpx;
 
  }
  .swiper_box{
    width: 100%;
    padding-top: 20rpx;
    overflow: hidden;
   text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 2px;
  }
  .swiper-item {
   font-size: 30rpx;
  }

js:
/**
*公告栏
*/
msgList:[
{ title: “：生命周期函数–监听页面加载” },
{ title: “：生命周期函数–监听页面初次渲染完成” },
{ title: “：生命周期函数–监听页面显示” }
官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
聪明的你们相信一看就能看懂。