跑马灯效果比较常见，一般做电子商务的小程序，都会用到，所以今天君典专门写了一篇文章，教你如何达到跑马灯的效果，以下是代码君的效果，你可以先看看！
赛马马灯效应的制作
制作它的方法非常简单。首先，给出代码，然后详细解释代码。
1.实现wxml接口
<! - Horse Lantern Effect --> ___________
<view>
<view>
<view style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;">
<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;
}
这就是风格。这是代码绅士，他将带您回到上一个教程中解释的内容。
1.如何设置以文本为中心的CSS样式？
只需将属性高度设置为与行高相同的高度即可。
2.显示属性
无：此元素不会显示
块：两个元素自动换行
内联：两个元素在一起
继承：继承父类
Flex：多个列和列
三，xxx.js
Page({
data: {
Text:'51 Screening, a money-saving shopping platform',
MarqueePace: 1, // Rolling Speed
MarqueeDistance: 0, // Initial rolling distance
size: 14,
Orientation:'left', // rolling direction
Interval: 20, // time interval
adUrl: '../../images/ic_home_msg.png',
},
onShow: function () {
// Page display
var that = this;
Var length = that. data. text. length * that. data. size; // text length
Var windowWidth = wx. getSystem InfoSync (). windowWidth; //screen width
that.setData({
length: length,
windowWidth: windowWidth,
});
That. run Marquee (); // Horizontal line scrolls and then scrolls in the same direction
},
runMarquee: function () {
var that = this;
var interval = setInterval(function () {
// The text moves all the way to the end.
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.interval);
}
})
JS中有很多解释
1.如何使用setInterval计时器？
setInterval(function(){
console.log("interval")
},1000)
此方法是Wechat applet的API ，可以直接使用。与普通计时器一样，setInterval需要传递两个参数，一个是回调方法，另一个是执行的频率。在这个项目中，我们使用字段参数interval，将值设置为20。
2. Settimeout和setinterval（）都是腾讯提供的API。他们之间有什么区别？
在我们可能希望每隔一段时间执行一次任务的场景中，Settimeout每隔一段时间执行一次函数。
etinterval（）函数每隔一次执行一次，也就是说，它总是在循环中执行，如果要停止，可以使用clearinterval。
3.马灯的实施原则
第1步：计算正在运行的灯笼上文本的长度
步骤2：每隔一段距离移动一点以产生运动
步骤3：当您移出屏幕时，将前照灯的距离重置为屏幕宽度，然后您可以继续循环第一步。
根据这些步骤，读者可以逐一比较代码。方法函数runMarquee中的代码逻辑用于执行上述三个步骤。在本文中，代码Jun没有解释太多。
摘要
以上是马跑灯的全过程效果，原理并不难，一个定时器，易于实现。
以上是本文的全部内容。我希望它对每个人的学习都有所帮助，我希望你能更多地支持
南京小程序开发，谢谢！
