<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}}">

      <view style=‘color:{{broadcast_arr.text_color}};margin-left:{{index!=0?item.starspos*2:0}}rpx;’ class="">

        {{item.img}}

      </view>

    </block>

  </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

// pages/index2/index2.js

Page({

  /**

   * 页面的初始数据

   */

  data: {

    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

    })

  },

  /**

   * 生命周期函数–监听页面初次渲染完成

   */

  onReady: function() {

  },

  /**

   * 生命周期函数–监听页面显示

   */

  onShow: function() {

  },

  /**

   * 生命周期函数–监听页面隐藏

   */

  onHide: function() {

  },

  /**

   * 生命周期函数–监听页面卸载

   */

  onUnload: function() {

  },

  /**

   * 页面相关事件处理函数–监听用户下拉动作

   */

  onPullDownRefresh: function() {

  },

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom: function() {

  },

  /**

   * 用户点击右上角分享

   */

  onShareAppMessage: function() {

  }

})