微信小程序 - 文字走马灯
转载于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 })
