.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()

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

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。