微信小程序微信小程序实现跑马灯（多条文字横向衔接滚动）效果完整代码附效果图

正文

基于CSS3主要代码实现

效果图

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() {

  }
})

wxml

  
    
      
        {{item.img}}
      
    
  

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

结语

第一次写博客，写的不是很好，各位大佬多多指点~