效果如圖

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
    })
  },
})