跑马灯效果,简单粗暴来说就是:一行文字水平向左滚动,滚动完了之后,从屏幕右侧出现,继续滚动,一般做电商类的小程序都会用到。原理不难,一个定时器,小程序自带API中 setInterval 即可完成。
一.效果图
1.
2.
二.代码
1.lamp.wxml
<view class="box">
<text style='left:{
{distance}}px;font-size:{
{size}}px'>{
{text}}</text>
</view>
2.lamp.wxss
.box{
width: 100%;
height: 75rpx;
line-height: 75rpx;
background: #eee;
position: relative;
}
.box text{
font-size: 32rpx;
position: absolute;
top: 0;
white-space: nowrap;
}