【小程序】滚动的公告栏

公告栏的展示方式一般是有两种:

1. 垂直方向滚动式
2. 水平方向滚动式

【垂直式公告栏】
原理：运用了小程序自带的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
      })
    },