相信大家在做小程序的时候,应该都会做一个滚动的公告吧,今天教大家做一个上下滚动的公告,先上图:
代码:
wxml:
<!--公告-->
<view class="notice_box">
<view class="notice">
<image src="/Icon/index_icon/notice.png"></image>
</view>
<view class="swiper_box">
<swiper
vertical="true"
autoplay="true"
circular="true"
interval="3000"
duration='300'
>
<block wx:for='{{msgList}}' wx:key='index'>
<swiper-item>
<view class="swiper-item">{{item.title}}</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
wxss:
/*
*公告栏
*/
.notice_box{
margin: 0 20rpx;
display: flex;
flex-direction: row;
height: 80rpx;
background-color: white;
}
.notice{
padding: 0 20rpx;
display: flex;
align-items: center;
}
.notice image{
width: 60rpx;
height: 60rpx;
}
.swiper_box{
width: 100%;
padding-top: 20rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: 2px;
}
.swiper-item {
font-size: 30rpx;
}
js:
/**
*公告栏
*/
msgList:[
{ title: “:生命周期函数–监听页面加载” },
{ title: “:生命周期函数–监听页面初次渲染完成” },
{ title: “:生命周期函数–监听页面显示” }
官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
聪明的你们相信一看就能看懂。