微信小程序跑马灯制作

.wxml文件

  <view class="example">
    <view class="marquee_box">
      <view class="marquee_text" style="{{orientation}}:{{marqueeDistance2}}px;font-size: {{size}}px;">
        <text>{{text}}</text>
        <text wx:if="{{marquee2copy_status}}" style="margin-left:{{marquee2_margin}}px;">{{text}}</text>
      </view>
    </view>
  </view>

.wxss样式

/* 跑马灯 */
.example {
  display: block;
  width: 100%;
  height: 100rpx;
}
.marquee_box {
  width: 100%;
  position: relative;
}
.marquee_text {
  white-space: nowrap;
  position: fixed;
  top: 10%;
  color: #fff;
}

关键Js文件

text: '敬请关注敬请关注敬请关注敬请关注敬请关注敬请关注敬请关注敬请关注敬请关注，敬请关注',  ----》跑马灯内容

// 跑马灯方法
  run2: function() {
    var vm = this;
    var interval = setInterval(function() {
      if (-vm.data.marqueeDistance2 < vm.data.length) {
        // 如果文字滚动到出现marquee2_margin=30px的白边，就接着显示
        vm.setData({
          marqueeDistance2: vm.data.marqueeDistance2 - vm.data.marqueePace,
          marquee2copy_status: vm.data.length + vm.data.marqueeDistance2 <= vm.data.windowWidth + vm.data.marquee2_margin,
        });
      } else {
        if (-vm.data.marqueeDistance2 >= vm.data.marquee2_margin) { // 当第二条文字滚动到最左边时
          vm.setData({
            marqueeDistance2: vm.data.marquee2_margin // 直接重新滚动
          });
          clearInterval(interval);
          vm.run2();
        } else {
          clearInterval(interval);
          vm.setData({
            marqueeDistance2: -vm.data.windowWidth
          });
          vm.run2();
        }
      }
    }, vm.data.interval);
  },

在 onLoad()或者 onReady() 初次渲染方法中调用即可  ——————》 this.run2()

来源：CSDN

作者：前端萌新豆腐渣

链接：https://blog.csdn.net/weixin_42164539/article/details/104044345