需求分析

最近开发的几个项目中都遇到了滚动展示小程序内消息通知的需求，ui框架中的组件样式不能满足需要，覆盖组件原有样式不仅麻烦而且后期也会面临代码维护困难的问题，于是决定基于微信原生swiper组件开发一个简易消息滚动组件。

需要实现的功能：
1. 纵向消息滚动
2. 支持配置滚动间隔时长，循环滚动
3. 展示一行文本，溢出隐藏

wxml代码

灰色背景
<view class="example-bg"></view>
消息滚动组件
<view class="my-msg-bar">
 <swiper class="my-msg-bar-swiper" autoplay circular vertical>
   <swiper-item class="my-msg-bar-swiper-item">
     <view class="item-text">
       International Band Music Concert
     </view>
   </swiper-item>
   <swiper-item class="my-msg-bar-swiper-item">
     <view class="item-text">
       International kids safe parents night out International kids safe parents night out
     </view>
   </swiper-item>
   <swiper-item class="my-msg-bar-swiper-item">
     <view class="item-text">
       Lorem ipsum dolor sit amet, consectetur 
     </view>
   </swiper-item>
 </swiper>
</view>

scss代码

.example-bg {
  background: #6D6D6D;
  height: 400rpx;
}

.my-msg-bar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  box-sizing: border-box;
  padding: 20rpx 30rpx;
  margin: -45rpx 32rpx 0;
  background: #fefeff;
  backdrop-filter: blur(40rpx);
  border-radius: 60rpx;
  box-shadow: 0 40rpx 40rpx 0 rgba(90, 90, 90, 0.1);
  .my-msg-bar-swiper {
    flex: 1;
    height: 50rpx;
    .my-msg-bar-swiper-item {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      .item-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

最终效果

后续会在该版本基础上扩展出更多功能，消息红点、左侧icon、右侧显示消息时间等。 希望能够帮到大家😁