转载于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 })