微信小程序实现简单跑马灯效果

选框效果比较常见，在电商的小程序中比较常用，所以今天Code Jun专门写了一篇文章教大家如何实现选框效果。下面是代码君达到的效果，大家可以先看一下！

字幕效果的制作

制作方法非常简单。首先放上代码，然后详细解释代码

1.wxml接口的实现

！-跑马灯效果-view class=' example ' view class=' marquee _ box ' view class=' marquee _ text ' style=' { { orientation } } : { { marquee distance } } px；font-size : { { size } } px；'image src=' http : { { adurl } } ' class=' ad-image '/{ { text } }/view/view界面布局非常简单，一个底部的背景容器，添加了一个广播图片和对应的跑马灯文字。

第二，wxss风格。示例{ display:块；宽度： 100%；height: 70rpx背景-color : # f2f2；线高： 70 rpx；}.marquee _ box { width : 100%；相对位置：}.marquee _ text { white-space : nowrap；绝对位置：top : 0；display: flexflex-direction : row；}.ad-image { width : 40 rpx；height: 40rpx右边距： 10 rpx；页边距-top : 15 rpx；}就是这个风格。在这里，代码将带您回到上一教程中解释的内容

1.如何设置文本中心的css样式？只需将属性高度和行高设置为相同的高度

2 .显示属性

否：将不显示此元素。块：两个元素自动换行。内联：两个元素紧密结合在一起。继承：继承父类flex:多列和多列

三.xxx.js

Page({ data: {text: '51能省钱的购物平台'，marqueePace: 1，//滚动速度marqueeDistance: 0，//初始滚动距离大小： 14，方向3360 '左'，//滚动方向interval: 20，//时间间隔adurl3360 '././images/IC _ home _ msg.png '，}，在show : function(){//页面显示that=thisvar length=that . data . text . length * that . data . size；//文本长度var window width=wx . getsysteminfosync()。窗宽；//屏幕宽度that . setdata({ length : length，window width : window width，})；that . runmarquee()；//水平一行字写完之后按原方向滚动}、run marquee : function(){ var that=this；varinterval=set interval(function(){//文本移动到最后if(-that . data . marquee distance that . data . length){ that . set data({ marquee distance : that . data . marquee distance-that . data . marquee space，})；} else { clearInterval(interval)；that . setdata({ marqueedistance : that . data . window width })；that . runmarquee()；} }，that . data . interval)；} })JS中有更多的解释

1.如何使用1.setInterval定时器？

SetInterval(function(){ console . log(' interval ')}，1000)是微信小程序的api，可以直接使用。与普通计时器一样，Setinterval需要传入两个参数，一个是回调方法，另一个是执行频率。在这个项目中，我们使用字段参数interval，该值设置为20。

2.settimeout和setinterval()是腾讯提供的API。它们的区别是什么？

Settimeout每隔一段时间执行一次该函数。场景是，我们可能希望任务每隔一段时间执行一次etinterval()函数，也就是说，它将一直在循环中执行。如果你想停止，可以使用clearinterval 3。0来实现跑马灯的原理

第一步：计算字幕的文本长度。第二步：每隔一段时间移动一点距离，产生运动。第三步：移出屏幕时，将选框的距离重置为屏幕宽度，然后可以继续循环第一步。根据代码王描述的这些步骤，读者可以逐一比较代码。方法函数runMarquee中的代码逻辑是执行上述三个步骤。在这里，代码王并没有过多解释总结。

以上是跑马灯效果的全过程，原理不是很难。定时器很容易实现。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。