这篇“小程序如何实现跑马灯效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“小程序如何实现跑马灯效果”文章吧。
先看效果图
实现步骤：
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.js
var 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);
}
})以上就是关于“小程序如何实现跑马灯效果”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
