最近有个项目里面用到跑马灯網上搜了下，虽然有人贴出来过一些实现但是实际上都存在一些个问题。

微信小程序现在实际上还是用的webview里面搞动画效率最高的莫过於使用CSS3的animation了。

跑马灯无非就是一直滚动这很容易想到使用无限循环的animation.

首先，视图模板wxml中：

这里为了连续无限滚动特意复制了2份跑马灯嘚内容（.content)。

然后样式wxss中：

 

 最后，js里面随便给 page.data.text 赋值一段文本即可具体js略。
 


 

 如果要调整滚动速度可以设置 .content 的元素的动画时间（ animation-duration 样式）。甴于微信小程序中无法获取到对应元素的宽度这个时间只能写死或者根据text的长度估算出一个值。
 


 

 完整的示例在jsfiddle上有个html版本的：