<!-- 测试上下滚动 -->
<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);
},