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

Dear 丶 2021-10-19 05:44 1001阅读 0赞

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

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

![在这里插入图片描述][2019081617245298.png]

### 解释：向上滚动，用了小程序的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"
          },
      ],
    			}
    },

[2019081617245298.png]: /images/20211018/f3d73941afb94be18a769a609359ffc1.png