微信小程序 - 文字走马灯

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

/* 走马灯 */

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

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

 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 })