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

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

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

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

<swiper class="top_assemble_banner_container" vertical="true" autoplay="true" circular="true" interval="3000">
    <block wx:for='{{assembleList}}' wx:key='unique'>
      <swiper-item class="top_assemble_banner_swiper_item">
        <view class="top_assemble_banner_swiper_item1">
          <image class="top_assemble_banner_img" src="../../../images/defaultProduct-img.png"></image>
          <view class="top_assemble_banner_name">{{item.title}}</view>
          <image class="top_assemble_banner_right_img" src="../../../images/icon_right_white.png"></image>
        </view>
      </swiper-item>
    </block>
  </swiper>

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包含全部滚动控件，里面宽度才可以自适应。