微信小程序实现中奖公告栏滚动轮播效果

最新推荐文章于 2024-11-25 14:45:25 发布

2025专业AI写手!

最新推荐文章于 2024-11-25 14:45:25 发布

阅读量6.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签： swiper 公告栏

本文链接：https://blog.youkuaiyun.com/AIB_Kasic/article/details/99682428

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

29 篇文章

订阅专栏

本文分享了使用微信小程序的swiper组件实现公告栏滚动效果的方法。通过垂直滚动、自动播放和循环显示等功能，展示了如何在小程序中优雅地展示动态公告信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我是热衷分享的小北。你们是热衷点赞的天使。

Let‘s go 不花里胡哨，先上效果图

在这里插入图片描述

解释：向上滚动，用了小程序的swiper，下面上代码

勤劳是中华民族的特性，请复制测试，动手丰衣足食。

HTML

<view class='notice'>
  <view class='notice-contain'>
    <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-index="idx" wx:for='{{aa}}'>
                <swiper-item>
                    <view class='content-item'>
                        <view class="time">{{item.time}}分钟前</view>
                        <view class='name'>{{item.nickName}}提现了</view>
                        <view class='wawa'>{{item.reward}}元</view>
                    </view>
                </swiper-item>
            </block> 
            
        </view>
    </swiper>
    </view>
    </view>

css .

/* 公告栏 */
 .notice{
  display: flex;
  justify-content: center;
  align-items: center;

  margin-top: 22rpx;
  
 }
 .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;
}

js

data(){
			return{
			   aa:[     //放三个，要自己加上去。
      {   
          time:7,
          nickName:"猪***能",
          reward:"2"
      },
      {   
          time:12,
          nickName: "画**",
          reward: "2"
      },
      {
          time:14,
          nickName: "wang**",
          reward: "2"
      },
  ],
			}
},