微信小程序—文字无线轮播、文字跑马灯效果

如图效果

直接上代码，一看就懂啦~  这里需要注意的是在小程序上style样式里面translate的单位rpx会无效，写成translateX( 空格 20rpx)就可以了

<view class="warn">
  <image src="{
  
  {IMG_URL}}/mod/coupon/assets/img/scenic/laba.png" style="width:40rpx;height:48rpx"></image>
  <view class='marquee' style='width:{
  
  {marqueeWidth}}rpx;'>
    <!-- style: transform:translateX rpx无效 解决方法 translateX('空格'300rpx) -->
    <view class='marqueeTitle' style="width:{
  
  {length}}rpx;margin-left:{
  
  {marqueeMargin}}px;transform:translateX( {
  
  {marqueeDistance}}rpx);font-size: {
  
  {size}}rpx;">{
  
  {title}}</view>
  </view>
</view>

 

.warn{
  background: #FEEBB1;
  height:60rpx