【微信小程序】实现通知消息公告轮播条

最新推荐文章于 2024-08-16 23:32:07 发布

profile.

最新推荐文章于 2024-08-16 23:32:07 发布

阅读量2.4k

点赞数

分类专栏：微信小程序文章标签：微信小程序 linq p2p 小程序

本文链接：https://blog.csdn.net/weixin_52921408/article/details/122871337

版权

微信小程序专栏收录该内容

2 篇文章

订阅专栏

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

思路是使用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