微信小程序 - 文字走马灯

转载于csdn maid_04，总之多谢了！节省了不少时间呢

最近在做一个类似uu跑腿的项目，时间也特别紧，搞完以后再继续贴地图代码(高德、腾讯)

以下代码拷贝即可用，拿走谢谢上面的人吧（~.~）

wxml

 <view class='loop-text'>
   <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;">
     {{text}}
   </view>
 </view>

wxss

/* 走马灯 */

.loop-text {
  width: 100%;
  height: 100%;
  color: #fdd100;
  padding: 4%;
  position: relative;
  background-color: #1d1819;
}

.marquee_text {
  white-space: nowrap;
  position: absolute;
  top: 12rpx;
}

js

 Page({
   data: {

     /**
      * 走马灯
      */
     text: '这是一条会滚动的文字滚来滚去的文字跑马灯，哈哈哈哈哈哈哈哈',
     marqueePace: .5, //滚动速度
     marqueeDistance: 0, //初始滚动距离
     marqueeDistance2: 0,
     marquee2copy_status: false,
     marquee2_margin: 60,
     size: 14,
     orientation: 'left', //滚动方向
     interval: 20 // 时间间隔
   },
   onShow: function() {
     // 页面显示
     let vm = this;
     let length = vm.data.text.length * vm.data.size; //文字长度
     let windowWidth = wx.getSystemInfoSync().windowWidth; // 屏幕宽度
     vm.setData({
       length: length,
       windowWidth: windowWidth,
       marquee2_margin: length < windowWidth ? windowWidth - length : vm.data.marquee2_margin //当文字长度小于屏幕长度时，需要增加补白
     });
     vm.run(); // 水平一行字滚动完了再按照原来的方向滚动
   },
   run: function() {
     let vm = this;
     let interval = setInterval(function() {
       if (-vm.data.marqueeDistance < vm.data.length) {
         vm.setData({
           marqueeDistance: vm.data.marqueeDistance - vm.data.marqueePace,
         });
       } else {
         clearInterval(interval);
         vm.setData({
           marqueeDistance: vm.data.windowWidth
         });
         vm.run1();
       }
     }, vm.data.interval);
   }
 })