小程序如何实现跑马灯效果

这篇“小程序如何实现跑马灯效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“小程序如何实现跑马灯效果”文章吧。

先看效果图

实现步骤：

index.wxml文件

<!-- 跑马灯效果 --><view class="example">  <view class="marquee_box">    <view class="marquee_text"           >      <image src="{{adUrl}}" class='ad-image' />{{text}}    </view>  </view></view>

wxss文件

.example {  display: block;  width: 100%;  height: 70rpx;  background-color: #f2f2f2;  line-height: 70rpx;}.marquee_box {  width: 100%;  position: relative;}.marquee_text {  white-space: nowrap;  position: absolute;  top: 0;  display: flex;  flex-direction: row;}.ad-image {  width: 40rpx;  height: 40rpx;  margin-right: 10rpx;  margin-top: 15rpx;}

js文件

// pages/home/home.jsvar app = getApp()Page({  data: {    //跑马灯    text: '618淘甄貨,一个可以省钱的购物平台',    marqueePace: 1,//滚动速度    marqueeDistance: 0,//初始滚动距离    size: 14,    orientation: 'left',//滚动方向    intervals: 20, // 时间间隔    adUrl: '../../images/detail/like.jpeg'  },  onShow: function () {    // 页面显示    var that = this;    var length = that.data.text.length * that.data.size;//文字长度    var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度    that.setData({      length: length,      windowWidth: windowWidth,    });    that.runMarquee();// 水平一行字滚动完了再按照原来的方向滚动  },  runMarquee: function () {    var that = this;    var interval = setInterval(function () {      //文字一直移动到末端      if (-that.data.marqueeDistance < that.data.length) {        that.setData({          marqueeDistance: that.data.marqueeDistance - that.data.marqueePace,        });      } else {        clearInterval(interval);        that.setData({          marqueeDistance: that.data.windowWidth        });        that.runMarquee();      }    }, that.data.intervals);  }})

以上就是关于“小程序如何实现跑马灯效果”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。