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

跑马灯效果比较常见，一般做电商类的小程序，都会用到，所以代码君今天特地写一篇文章，来教一下大家，如何去实现跑马灯效果，下面是代码君实现的效果，可以先看一下！

跑马灯效果的制作

制作方式很简单，先方上代码，后面会对代码详细讲解

一、wxml界面的实现

{ {text}}

界面布局很简单，一个底部背景容器，加入一个广播图片和对应的跑马灯文字

二、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 {

wid