效果

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.