多条文字横向衔接滚动（基于CSS3主要代码实现）

效果如图

https://img-blog.csdnimg.cn/20190219152005402.gif

wxml

<view class="wrapper">
    <navBar navTitle="{{nav_title}}" backgroundColor="{{backgroundColor}}" fontSizeColor="{{fontSizeColor}}"></navBar>
    <view class='container'>
        <view class="marquee_container " style="background:{{broadcast_arr.back_color}};font-size:32rpx;">
              <view class='marquee_text' style='--marqueeWidth--:{{-broadcast_arr.width_mal}}px;--speed--:{{broadcast_arr.time}}s;width:{{broadcast_arr.width_mal}}px;'>
                <block wx:for="{{data}}" wx:key="unique">
                  <view style='color:{{broadcast_arr.text_color}};margin-left:{{index!=0?item.starspos*2:0}}rpx;' class="">
                    {{item.img}}
                  </view>
                </block>
              </view>
            </view>
    </view>
</view>

wxss

@keyframes around {
  from {
    margin-left: 100%;
  }

  to {
    margin-left: var(--marqueeWidth--);
  }
}

.marquee_container {
  /* background-color: #0099FF; */
  padding: 12rpx 0;
  position: relative;
  width: 100%;
  height: 50rpx;
  
}

.marquee_text {
  display: flex;
  white-space: nowrap;
  animation-name: around;
  animation-duration: var(--speed--);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  line-height: 50rpx;
}

.marquee_tit {
  height: 50rpx;
  line-height: 50rpx;
  position: absolute;
  padding-left: 22rpx;
}

js

import {AddFormId,getQuestions} from '../../../../api/index'
import {getCurrentPage,setStore,getStore,removeStore} from "../../../../utils/util"
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    nav_title:'测试',
    backgroundColor:'#6a352a',
    fontSizeColor:'#fff',
    windowHeight:app.globalData.windowHeight,
    totalTopHeight:app.globalData.totalTopHeight,
    data: [

      {
        img: "惠便利自提店铺优惠多多惠便利自提店铺优惠多多惠便利自提店铺优惠多多惠便利自提店铺优惠多多惠",
        linkurl: "",
        linkname: "",
        starspos: 0,
        back_color: "gold"
      }, {
        img: "江龙：每日惠自提店铺特价啦~店铺特价啦~店铺特价啦~",
        linkurl: "",
        linkname: "",
        starspos: 0, //间距
        back_color: "#000000"
      }, {
        img: "啦啦啦啦啦啦啦啦啦啦~啦啦啦啦啦~啦啦啦啦啦~",
        linkurl: "",
        linkname: "",
        starspos: 0, //间距
        back_colors: "red"
      }
      , {
        img: "哈哈哈哈~",
        linkurl: "",
        linkname: "",
        starspos: 0, //间距
        back_colors: "red"
      }
    ],
    broadcast_arr: {
      speed: 2.8, //滚动速度，每秒2.8个字
      font_size: "16", //字体大小(px)
      text_color: "#ffffff", //字体颜色
      back_color: "#269e9e", //背景色

    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    let ititdata = this.data.data,
      assist = this.data.broadcast_arr,
      this_width = 0,
      spacing = 0,
    speed = (this.data.broadcast_arr.speed * this.data.broadcast_arr.font_size); //m每秒行走的距离
    
    for (let i in ititdata) {
      ititdata[i].starspos = wx.getSystemInfoSync().windowWidth; //以取屏幕宽度为间距
      this_width += ititdata[i].img.length * this.data.broadcast_arr.font_size;
      if (i != ititdata.length - 1) {
        spacing += ititdata[i].starspos
      }
    }
    let total_length = this_width + spacing;//总长
    assist.time = total_length / speed; /**滚动时间*/
    assist.width_mal = total_length; 
    this.setData({
      broadcast_arr: assist,
      data: ititdata
    })
  },
})