在小程序开发中经常需要通知消息公告轮播条来提示用户，下面讲解一下自己做的通知消息公告轮播条。

        思路是使用swiper。

wxml

<view class="post"><image class="img" src="../../images/图标/xinxi.png"/><swiper class="swiper2" easy-function="{{easy_function}}" autoplay="true" interval="3000" duration="500" circular="true" vertical="true"><block wx:for="{{post}}" wx:key="no" wx:for-item="post"><swiper-item><text class="text">·   {{post.text}}</text></swiper-item></block></swiper>
</view>

公告信息存储在post.text中。

wxss

.post{position: relative;background-color: rgb(248, 237, 210);height: 55rpx;width: 710rpx;left: 20rpx;top: 35rpx;display: flex;
}
.swiper2{width: 100%;height: 50rpx;padding-top: 2rpx;
}
.img{height: 46rpx;width: 46rpx;padding-top: 2rpx;padding-left: 5rpx;
}
.text{font-size: 90%;font-weight: 300;color: rgb(82, 78, 78);
}

swiper微信官方文档：swiper | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html       swiper-item | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/component/swiper-item.html