【微信小程序】怎么写小程序文字跑马灯效果？小程序文字滚动？

wxml

<view class="example xingentimesd">
    <view class="marquee_box">
       <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;">
          {{text}}
       </view>
    </view>
</view>

wxss

.xingentimesd{
  font-size: 24rpx;
  color: #2397f9;
  letter-spacing: 2rpx;
  text-align: center;
  background: #e6f7ff;
}
.example {
  display: block;
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
}

.marquee_box {
  width: 100%;
  position: relative;
}

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

备注：布局的时候需要注意的必须给滚动文字的父盒子添加position:absolute,否则就实现不了动态效果。谨记！！！

接着就该编写JS来实现文字跑马灯的效果啦！

思路：

声明变量
使用我们之前变量来获取到我们所需要用到的值
通过this.setData来实现效果

data:{
    text: '时间：01月25日13时25分-01月25日13时50分',
    marqueePace: 3,//滚动速度
    marqueeDistance: 0,//初始滚动距离
    marqueeDistance2: 0,
    marquee2copy_status: false,
    marquee2_margin: 60,
    size: 14,
    orientation: 'left',//滚动方向
    interval: 60 // 时间间隔    
},
onShow: function () {
    var tm = this;
    var length = tm.data.text.length * tm.data.size;//文字长度
    var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度
    tm.setData({
        length: length,
        windowWidth: windowWidth,
        marquee2_margin: length < windowWidth ? windowWidth - length : tm.data.marquee2_margin//当文字长度小于屏幕长度时，需要增加补白
    });
    tm.run1();// 水平一行字滚动完了再按照原来的方向滚动

},
run1: function () {
  var tm = this;
  var interval = setInterval(function () {
    if (-tm.data.marqueeDistance < tm.data.length) {
      tm.setData({
        marqueeDistance: tm.data.marqueeDistance - tm.data.marqueePace,
      });
    } else {
      clearInterval(interval);
      tm.setData({
        marqueeDistance: tm.data.windowWidth
      });
      tm.run1();
    }
  }, tm.data.interval);
},

至此，小程序跑马灯编写完毕。点击预览扫码就可以在手机上面来查看文字跑哪等效果了。下章节更新web端的文字滚动效果，尽情期待！

【微信小程序】怎么写小程序文字跑马灯效果？小程序文字滚动？

猜你喜欢