微信小程序——滚动公告栏

一、效果展示

二、滚动公告栏完整代码 

First  .wxml代码

<!-- 滚动公告区域，仅当 if_feedback 为 1 时显示 -->
<view wx:if="{{if_feedback === 1}}" class="inform" >
    <view class="inform-img">
        <image src="/source/images/sysLogo.png" class="inform-image"></image>
    </view>
    <!-- 使用动态样式进行滚动动画 -->
    <view class='marquee' style='width:{{marqueeWidth}}rpx;'>
        <view class='marqueeTitle' style="width:{{length}}rpx;transform:translateX({{marqueeDistance}}rpx);font-size: {{size}}rpx;">{{text}}</view>
    </view>
</view>

Second  .wxss代码

/**
    滚动公告 
*/


/* 滚动公告格式 */
.inform{
  width:100%;
  height:70rpx;
  background-color: #F6F6F6;
  margin:10rpx 0;
  margin-left: 2%;
  border-radius: 10rpx;
  display: flex;
  float: left;
}
.inform-img{
  width:10%;
  margin-left: 5%;
  text-align: center;
}
.inform-image{
  width:60rpx;
  height:60rpx;
  margin-top:5rpx;
}
.marquee{
  width:80%;
  height: 70rpx;
  overflow: hidden;
  line-height: 70rpx;
}
.marqueeTitle{
  height: 70rpx;
  color:#ff0000;
}

Third  .js代码

1. data 属性中的滚动公告栏相关数据：

data: {
  text: "", // 用于存储公告栏显示文本
  marqueePace: 1.3, // 滚动速度
  marqueeDistance: 0, // 初始滚动距离
  size: 28, // 字号
  marqueeWidth: 700, // 文本宽度
  intervalId: null, // 存储定时器的ID
  animationId: null, // 存储动画帧的ID
  if_feedback: 0, // 是否有待反馈项，控制滚动栏是否出现
  feedback_list: [], // 待反馈活动列表
  // 其他数据略...
}

2. 开始滚动的函数 （startMarquee）：

startMarquee: function () {
  if (this.data.if_feedback === 0) {
    console.log("无需要反馈内容或无滚动文本，不启动滚动公告");
    return;
  }
  const length = this.data.text.length * this.data.size; // 计算文本长度
  const width = this.data.marqueeWidth;

  // 保留初始设置
  this.setData({
    marqueeDistance: width
  });

  const pace = this.data.marqueePace;

  this.data.intervalId = setInterval(() => {
    let distance = this.data.marqueeDistance - pace;
    // 确保整个文本长度加上视图宽度都已经移动到了左侧
    if (-distance > length + width) {
      distance = width; // 重置距离到初始位置
    }
    this.setData({
      marqueeDistance: distance
    });
  }, 20);
}

3. 清除定时器的函数 （clearMarqueeInterval）：

clearMarqueeInterval: function () { // 若定时器存在，清除定时器
  if (this.data.intervalId) { 
    clearInterval(this.data.intervalId);
    this.data.intervalId = null;
  }
}

4. 在页面显示时启动滚动公告栏的逻辑 （onShow）：

onShow() { 
  let that = this
  if (!that.data.intervalId) { // 若不存在定时器，创建定时器
    that.startMarquee();
  }
  // 其他逻辑略...
}

5. 在页面隐藏或卸载时清除滚动公告栏的定时器 （onHide 和 onUnload）：

onHide() {
  this.clearMarqueeInterval();
},

onUnload() {
  this.clearMarqueeInterval();
}

6. 从后端获取数据并启动滚动公告的部分 （getHome）：

getHome: function () { // 从后端获取数据，并判断是否需要启动滚动公告栏
  var that = this;
  let userId = "";

  // 省略部分逻辑...

  wx.request({
    // 省略请求逻辑...
    success: function (res) {
      if (res.statusCode === 200) {
        // 省略处理逻辑...
        
        if (that.data.if_feedback) {
          that.startMarquee(); // 启动滚动公告栏
          that.setData({ // 为滚动公告栏的显示文本字段赋值
            text: "您有" + that.data.feedback_list.length + "个活动待提交反馈，详情请点击查看，谢谢！"
          })
        }

      } else {
        // 省略错误处理逻辑...
      }
    },
    // 省略失败处理逻辑...
  });
}

---

 三、关键困难

（1）问题描述：首页滚动公告栏速度越来越快，导致内存溢出，程序崩溃。

（2）原因：定时器重复设置。每次调用 startMarquee 方法时，都会创建一个新的定时器 intervalId。如果没有清除上一个定时器，新的定时器会叠加在旧的定时器上，导致滚动速度加快。

（3）解决方法：在调用startMarquee()创建新的定时器前清除上一个定时器。【在data中使用intervalId字段存储定时器的ID】

// 如果已经存在定时器，先清除
if (this.data.intervalId) {
    clearInterval(this.data.intervalId);
}