跑马灯效果比较常见,一般做电商类的小程序,都会用到,所以代码君今天特地写一篇文章,来教一下大家,如何去实现跑马灯效果,下面是代码君实现的效果,可以先看一下!
跑马灯效果的制作
制作方式很简单,先方上代码,后面会对代码详细讲解
一、wxml界面的实现
<!-- 跑马灯效果 -->
<view class="example">
<view class="marquee_box">
<view class="marquee_text" 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