js跑马灯实现上下左右滚动 translateY translateYX

     

     <!-- 测试上下滚动 -->
    <div class="h90 hlc">
      <img class="w50 h35 mlr30" src="http://192.168.1.240:8080/ypStatic/img/index/notice.png" />
      <div class="h40 overflow">
          <div class=" f28pc text1  marquee" :style="{'transform':'translateY('+translateY+'rpx)','transition':'transform '+transform+'ms'}" >
              <p class="text1 w600"  v-for="item in 6" :key="item">测试跑马灯跑马灯跑马灯{{item}}</p>
          </div>
      </div>
    </div>

      <!-- 测试左右滚动 -->
    <div class="h90 hlc">
      <img class="w50 h35 mlr30" src="http://192.168.1.240:8080/ypStatic/img/index/notice.png" />
      <div class="h40 overflow w640">
          <div class=" f28pc  marquee1 hlc" :style="{'transform':'translateX('+translateX+'rpx)','transition':'transform '+transform+'ms'}" >
              <p class="text1 w600" v-for="item in 6" :key="item">测试跑马灯跑马灯跑马灯{{item}}</p>
          </div>
      </div>
    </div>

css
.h90 {
  height:90rpx;
}
.hlc {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.w50{
   width:50rpx;
}
.h35 {
height:35rpx;

}
.mlr30 {
margin-left:30rpx;
margin-right:30rpx;

}
.overflow {
overflow:hidden;

}
.h40 {
height:40rpx;

}
.hlc {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.w600{
    width:600rpx;
}
.text1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

 // 左右滚动
.marquee{
      width: 100%;
      background: #fff;
      border: none;
      display: block;
      margin: 0 auto;
      white-space: nowrap;
      text-overflow: clip;
      position: relative;
      font-size: 28rpx;
      height:auto;
  }
  .marquee p{
      height: 40rpx;
      display: block;
  }
  // 上下滚动
  .w640{
    width: 640rpx;
  }
  
  .marquee1{
      width: auto;
      background: #fff;
      border: none;
      display: block;
      margin: 0 auto;
      white-space: nowrap;
      text-overflow: clip;
      position: relative;
      font-size: 28rpx;
      height:40rpx;
  }
   .marquee1 p{
      height: 40rpx;
      display: inline-block;
      width: 640rpx;
  }

js

data：{
translateY:0,
transform:300,
index:0,
translateX:0,
}

 

this.marquee();
marquee(){
        let that = this;
        let index = that.index;

if(this.notice.length==2){

return;

}

        if(index == 6){
           // y
            that.index =0;
            that.translateY = 0;
            that.transform = 0;
            // x
            that.translateX = 0;
        }else{
          // y
          that.index = index +1;
          that.translateY = '-'+index*40;
          that.transform = 300;
          // x
          that.translateX = '-'+index*640;
        }
        setTimeout(() => this.marquee(), 3000);
    },