轉載於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 })