我是热衷分享的小北。你们是热衷点赞的天使。
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:
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:
width: 2px;
height: 54rpx;
}
js
data(){
return{
aa:[ //放三个,要自己加上去。
{
time:7,
nickName:"猪***能",
reward:"2"
},
{
time:12,
nickName: "画**",
reward: "2"
},
{
time:14,
nickName: "wang**",
reward: "2"
},
],
}
},