7.微信小程序之跑马灯效果

跑马灯效果，简单粗暴来说就是：一行文字水平向左滚动，滚动完了之后，从屏幕右侧出现，继续滚动，一般做电商类的小程序都会用到。原理不难，一个定时器，小程序自带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;
}