微信小程序微信小程序实现跑马灯（多条文字横向衔接滚动）

た入场券 2022-12-05 13:52 513阅读 0赞

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

wxml

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

效果  
![在这里插入图片描述][20200910174638807.gif_pic_center]

[20200910174638807.gif_pic_center]: /images/20221123/d5515ce544394622895ed4e901763576.png