微信小程序-文字跑马灯效果

效果 

wxml

1. <view>1 显示完后再显示</view>
2. <view class="example">
3. <view class="marquee_box">
4. <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;">
5. {{text}}
6. </view>
7. </view>
8. </view>
9. <view>2 出现白边后即显示</view>
10. <view class="example">
11. <view class="marquee_box">
12. <view class="marquee_text" style="{{orientation}}:{{marqueeDistance2}}px;font-size: {{size}}px;">
13. <text>{{text}}</text>
14. <text wx:if="{{marquee2copy_status}}" style="margin-left:{{marquee2_margin}}px;">{{text}}</text>
15. </view>
16. </view>
17. </view>

wxss

1. .example {
2. display: block;
3. width: 100%;
4. height: 100rpx;
5. }
6.  
7. .marquee_box {
8. width: 100%;
9. position: relative;
10. }
11.  
12. .marquee_text {
13. white-space: nowrap;
14. position: absolute;
15. top: 0;
16. }

js

1. // pages/home/marquee/marquee.js
2. Page({
3. data: {
4. text: '这是一条会滚动的文字滚来滚去的文字跑马灯，哈哈哈哈哈哈哈哈',
5. marqueePace: 1,//滚动速度
6. marqueeDistance: 0,//初始滚动距离
7. marqueeDistance2: 0,
8. marquee2copy_status: false,
9. marquee2_margin: 60,
10. size: 14,
11. orientation: 'left',//滚动方向
12. interval: 20 // 时间间隔
13. },
14. onShow: function () {
15. // 页面显示
16. var vm = this;
17. var length = vm.data.text.length * vm.data.size;//文字长度
18. var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度
19. vm.setData({
20. length: length,
21. windowWidth: windowWidth,
22. marquee2_margin: length < windowWidth ? windowWidth - length : vm.data.marquee2_margin//当文字长度小于屏幕长度时，需要增加补白
23. });
24. vm.run1();// 水平一行字滚动完了再按照原来的方向滚动
25. vm.run2();// 第一个字消失后立即从右边出现
26. },
27. run1: function () {
28. var vm = this;
29. var interval = setInterval(function () {
30. if (-vm.data.marqueeDistance < vm.data.length) {
31. vm.setData({
32. marqueeDistance: vm.data.marqueeDistance - vm.data.marqueePace,
33. });
34. } else {
35. clearInterval(interval);
36. vm.setData({
37. marqueeDistance: vm.data.windowWidth
38. });
39. vm.run1();
40. }
41. }, vm.data.interval);
42. },
43. run2: function () {
44. var vm = this;
45. var interval = setInterval(function () {
46. if (-vm.data.marqueeDistance2 < vm.data.length) {
47. // 如果文字滚动到出现marquee2_margin=30px的白边，就接着显示
48. vm.setData({
49. marqueeDistance2: vm.data.marqueeDistance2 - vm.data.marqueePace,
50. marquee2copy_status: vm.data.length + vm.data.marqueeDistance2 <= vm.data.windowWidth + vm.data.marquee2_margin,
51. });
52. } else {
53. if (-vm.data.marqueeDistance2 >= vm.data.marquee2_margin) { // 当第二条文字滚动到最左边时
54. vm.setData({
55. marqueeDistance2: vm.data.marquee2_margin // 直接重新滚动
56. });
57. clearInterval(interval);
58. vm.run2();
59. } else {
60. clearInterval(interval);
61. vm.setData({
62. marqueeDistance2: -vm.data.windowWidth
63. });
64. vm.run2();
65. }
66. }
67. }, vm.data.interval);
68. }
69. })