轉載於csdn maid_04，總之多謝了！節省了不少時間呢

最近在做一個類似uu跑腿的項目，時間也特別緊，搞完以後再繼續貼地圖代碼(高德、騰訊)

以下代碼拷貝即可用，拿走謝謝上面的人吧（~.~）

wxml

1 <view class=‘loop-text‘>
2   <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;">
3     {{text}}
4   </view>
5 </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

 1 Page({
 2   data: {
 3 
 4     /**
 5
 
      * 走馬燈
 6      */
 7     text: ‘這是一條會滾動的文字滾來滾去的文字跑馬燈，哈哈哈哈哈哈哈哈‘,
 8     marqueePace: .5, //滾動速度
 9     marqueeDistance: 0, //初始滾動距離
10     marqueeDistance2: 0,
11     marquee2copy_status: false,
12     marquee2_margin: 60,
13     size: 14,
14     orientation: ‘left‘, //滾動方向
15     interval: 20 // 時間間隔
 

16   },
17   onShow: function() {
18     // 頁面顯示
19     let vm = this;
20     let length = vm.data.text.length * vm.data.size; //文字長度
21     let windowWidth = wx.getSystemInfoSync().windowWidth; // 屏幕寬度
22     vm.setData({
23       length: length,
24       windowWidth: windowWidth,
25       marquee2_margin: length < windowWidth ? windowWidth - length : vm.data.marquee2_margin //當文字長度小於屏幕長度時，需要增加補白
26     });
27     vm.run(); // 水平一行字滾動完了再按照原來的方向滾動
28   },
29   run: function() {
30     let vm = this;
31     let interval = setInterval(function() {
32       if (-vm.data.marqueeDistance < vm.data.length) {
33         vm.setData({
34           marqueeDistance: vm.data.marqueeDistance - vm.data.marqueePace,
35         });
36       } else {
37         clearInterval(interval);
38         vm.setData({
39           marqueeDistance: vm.data.windowWidth
40         });
41         vm.run1();
42       }
43     }, vm.data.interval);
44   }
45 })

微信小程序 - 文字走馬燈