微信小程序实现上下滚动消息提醒

主要是利用swiper组件来实现，swiper组件在小程序中是滑块视图容器。

我们通过vertical属性（默认为false,实现默认左右滚动）设置为true来实现上下滚动。

（需要注意的是：只要你的swiper存在vertical属性，无论你给值为true或者false或者不设参数值，都将实现上下滚动）
wxml

    
      
        
          
          {
    {item.title}}
          
        
      
    
  

wxss

.top_assemble_banner_container{
  width: 500rpx;
  height: 60rpx;
  position: fixed;
  top: 60rpx;
  left: 32rpx;
}

.top_assemble_banner_swiper_item{
  height: 60rpx;
  display: flex;
}
.top_assemble_banner_swiper_item1{
  height: 60rpx;
  display: flex;
  background:#000;
  opacity: 0.5;
  flex-direction: row;
  align-items: center;
}

.top_assemble_banner_img{
  width: 48rpx;
  height: 48rpx;
  margin-left: 6rpx;
}

.top_assemble_banner_name{
font-size:24rpx;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(255,255,255,1);
line-height:24rpx;
margin-left: 20rpx;
}

.top_assemble_banner_right_img{
  width: 28rpx;
  height: 28rpx;
  margin-left: 16rpx;
  margin-right: 14rpx;
}

JS

data: { 
    assembleList: [{
        title: '李菲儿发起了拼团'
      },
      {
        title: '赵小丽发起了拼团'
      },
      {
        title: '张璐璐璐发起了拼团'
      }
    ],
  },

效果

swiper 控件使用时必须设置宽高，且不能为100%否则不显示，swiper-item默认宽高和swiper相同，想要使内部控件宽度自适应，就先在top_assemble_banner_container中将swiper的宽度设置较宽且背景透明，swiper-item也设置一层top_assemble_banner_swiper_item，最后一层top_assemble_banner_swiper_item1包含全部滚动控件，里面宽度才可以自适应。