微信小程序公告滚动通知

微信小程序实现上下滚动消息提醒，主要是利用swiper组件来实现，swiper组件在小程序中是滑块视图容器。

通过vertical属性（默认为false,实现默认左右滚动）设置为true来实现上下滚动。
只要你的swiper存在vertical属性，无论你给值为true或者false或者不设参数值，都将实现上下滚动

• 效果图

  
    左右滚动

• wxml code

  
  公告：
  
    
      
        
          {{item.title}}
        
      
    
  

• wxs code

.adsec{
  width: 90%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin: 10rpx auto;
  background:rgba(254,242,242,1);
  border-radius:6px;
  padding: 7rpx 10rpx;
  height: 50rpx;
}
.adsec icon{
  display: flex;
  margin-right: 10rpx;
}
.swiper_container {
  height: 55rpx;
  width: 80%;
  line-height: 55rpx;
  padding-left: 10rpx;
}

.swiper_item {
  font-size: 25rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 2px;
}

• js

msgList: [
      { url: "url", title: "恭喜xxx完成任务退回200进入领奖区" },
      { url: "url", title: "恭喜xxx获得XXX奖励" },
      { url: "url", title: "恭喜xxx完成任务退回300进入领奖区" }]

来源：https://www.jianshu.com/p/71502ae00d5c