公告栏的展示方式一般是有两种:
- 垂直方向滚动式
- 水平方向滚动式
【垂直式公告栏】
原理:运用了小程序自带的swiper来实现
适用范围:信息量短或可跳转详情的多条公告消息。
// 数据:
noticeList: [{
content: '公告1',
}, {
content: '公告2',
}, {
content: '公告3',
}, {
content: '公告4~~~~~~~~~~~~~~~~~~~',
}],
// 布局:
<view class="verticality_box">
<swiper class="notice_verticality" autoplay="true" vertical="true" circular="true" interval="2000" display-multiple-items='1'>
<block wx:for="{
{noticeList}}">
<swiper-item>
<view class="noticecont">{
{item.content}}</view>
</swiper-item>
</block>
</swiper>
</view>
// 样式:
.verticality_box {
width: 100%;
margin: 10px auto;
}
.notice_verticality {
width: 100%;
height: 50rpx;
line-height: 50rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.noticecont {
width: calc(100vw - 20px);
line-height: 50rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
【水平式公告栏】
原理:跑马灯
适用范围:单条数据为最佳
数据:
noticeList: [{
content: '公告1',
}, {
content: '公告2',
}, {
content: '公告3',
}, {
content: '公告4~~~~~~~~~~~~~~~~~~~',
}],
// 水平滚动数据
scrollData: {
speed: 5, //滚动速度,每秒5个字
font_size: "16", //字体大小(px)
text_color: "#de8c17", //字体颜色
back_color: "#fffbe8", //背景色
}
布局:
<view class="horizontal_box">
<view class='marquee_text' style='--marqueeWidth--:{
{-scrollData.width}}px;--speed--:{
{scrollData.time}}s;width:{
{scrollData.width_mal}}px;'>
<block wx:for="{
{noticeList}}" wx:key='index'>
<view class="notice_cont" style='color:{
{scrollData.text_color}};'>{
{item.content}}</view>
</block>
</view>
</view>
样式:
@keyframes around {
from {
margin-left: 100%;
}
to {
margin-left: var(--marqueeWidth--);
}
}
.horizontal_box {
position: relative;
width: 100%;
margin: 10px auto;
height: 50rpx;
line-height: 50rpx;
overflow: hidden;
}
.marquee_text {
width: 100%;
display: flex;
white-space: nowrap;
animation-name: around;
animation-duration: var(--speed--);
animation-iteration-count: infinite;
animation-timing-function: linear;
line-height: 50rpx;
}
.marquee_tit {
height: 50rpx;
line-height: 50rpx;
position: absolute;
padding-left: 22rpx;
}
.notice_cont{
margin-right: 20px;
}
// 方法(重点):
// 水平方向 公告栏
noticeEvent() {
let noticeList = this.data.noticeList,
scrollData = this.data.scrollData,
this_width = 0,
spacing = 0,
speed = (this.data.scrollData.speed * this.data.scrollData.font_size); //m每秒行走的距离
for (let i in noticeList) {
if (noticeList[i].content) {
this_width += noticeList[i].content.length * this.data.scrollData.font_size + 20;
} else {
noticeList[i].content = ''
}
}
let total_length = this_width;//总长
scrollData.time = total_length / (speed / 2.5 ); /**滚动时间*/
scrollData.width = total_length - wx.getSystemInfoSync().windowWidth;
// 如果公告内容少,则不滚动
if(total_length<= wx.getSystemInfoSync().windowWidth){
scrollData.time = 0
}
this.setData({
scrollData: scrollData,
noticeList: noticeList
})
},