微信小程序实现公告自动滚动效果

![](https://ooolo.net/usr/uploads/2023/07/3297568315.png)

```html

<view class='notice'>
  <view class='notice-contain'>
    <text class="cuIcon-notificationfill text-red"></text>
    <view class="notice-containTitle">公告栏</view>
    <swiper class="tab-right" vertical="true" autoplay="true" circular="true" interval="2000" display-multiple-items='1'>
      <view class="right-item">
        <block wx:for="{{msgList}}">
          <swiper-item>
            <view class='content-item'>
              <view class="swiper-item text-red text-bold">{{item.title}}</view>
            </view>
          </swiper-item>
        </block>
      </view>
    </swiper>
  </view>
</view>

```

```css
/* 公告栏 */
.notice {
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin-top: 10rpx */
}

.notice-contain {
  box-shadow: 0px 1px 1px 1px rgba(202, 199, 199, 0.993);
  display: flex;
  flex-direction: row;
  background: #FFFFFF;
  width: 700rpx;
  height: 82rpx;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
}

.notice-containTitle {
  font-weight: bold;
  font-size: 32rpx;
  position: relative;
  /* top: 0; */
  left: 14rpx;
}

.notice-containTitle::after {
  position: absolute;
  top: -4rpx;
  left: 110rpx;
  content: "";
  display: block;
  background: #AAAAAA;
  width: 2px;
  height: 54rpx;
}

.tab-right {
  height: 55rpx;
  width: 80%;
  line-height: 55rpx;
  padding-left: 70rpx;
}

.swiper-item {
  font-size: 28rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 2px;
}
```

```javascript
 msgList: [{
      title: "视频无水印解析免费无限次使用~"
    }, {
      title: "视频无水印解析免费无广告使用~"
    }]
```

本文由 admin 创作，采用知识共享署名4.0 国际许可协议进行许可。
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。