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

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

た入场券 2022-12-05 13:52 619阅读 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

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