关于vue项目中js实现轮播功能。
由于项目要求,ui组件库实现不好要的效果,所以,手动写了一个。
先看效果吧
这里左右箭头是可以点击滑动的,类似轮播样式,这里是由于后台返回数据list,一次加载3条
实现方法主要下面介绍
首先是静态页面
<div class="process-box" ref='processBox'>
<p>员工历程</p>
左箭头 <a href="javascript:void(0);" class="circle-orange btn-prev" :class="{active:prevActive}" @click="transMove('prev')"></a>
<div class="process-list" :style="{width:processListWidth}" ref="proList" style="transform:translateX(0px)">
<div class="process-item" v-for="(item, index) in process" :key='index' ref='proitem' :style="{width:processItemW}">
<p class="txt-time">{{item.createTime}}</p>
<p class="line-step"><i class="circle-icon"></i></p>
<div class="process-info">
<h5>{{item.courseTitle}}</h5>
<p v-html="item.processRecord"></p>
</div>
</div>
</div>
右箭头 <a href="javascript:void(0);" class="circle-orange btn-next" :class="{active:nextActive}" @click="transMove('next')"> </a>
</div>
在data里面定义下
data() {
return {
infoH:'',
processDataLen:0,
processListWidth:'100%',
processItemW:'',
itemWidth:'',
transPx: '0',
transpage:0,
prevActive:false,
nextActive:false,
};
},
在写实现方式,methods
getTransWidth(processData){
this.processDataLen = processData.length;
if(this.processDataLen > 3){
this.nextActive = true;
}
let processBoxW = this.$refs.processBox.offsetWidth;
if(this.processDataLen > 3){
this.itemWidth = Math.floor(processBoxW/3 - 8)
this.processItemW = this.itemWidth + 'px';
this.processListWidth = (this.processDataLen * (this.itemWidth + 20)) + 'px';
}
},
transMove(param){
let processListBox = this.$refs.proList;
if(param == 'prev'){
if(this.transpage < 1){
this.prevActive = false;
processListBox.style.transform = `translateX(0px)`;
processListBox.style.transitionDuration = '300ms';
}else{
if(!(this.transpage >= this.processDataLen-2)){
this.nextActive = true;
}
this.transpage--;
this.transAction(this.itemWidth,processListBox);
}
}
if(param == 'next'){
if(!(this.transpage >= this.processDataLen-3)){
this.nextActive = true;
if(this.transpage > -1){
this.prevActive = true;
}
this.transpage++;
this.transAction(this.itemWidth,processListBox);
}else{
this.nextActive = false;
}
}
},
transAction(itemWidth,contentBox){
let transTotalW = -(this.transpage * itemWidth);
contentBox.style.transform = `translateX(${transTotalW}px)`;
contentBox.style.transitionDuration = '300ms';
}
样式
<style scoped>
.process-box{
width: 100%;
overflow: hidden;
padding-top: 20px;
border-top: 1px solid #E5E5E5;
position: relative;
}
.process-box>p{
font-size: 16px;
color: #394A66;
padding-bottom: 20px;
padding-left: 20px;
}
.process-box>ul>li{
position:relative;
padding-bottom:20px;
}
.process-info{
display: inline-block;
width: 100%;
padding: 20px 55px 30px;
text-align: center;
}
.process-info h5{
font-size: 16px;
color: #394A66;
padding-bottom: 10px;
}
.process-info p{
font-size: 14px;
color: #97A2B3;
text-align: left;
line-height: 30px;
}
.txt-time{
display: block;
font-size: 12px;
color: #F95714;
text-align: center;
width: 150px;
height: 22px;
line-height: 21px;
margin: 20px auto;
border: 1px solid #F95714;
border-radius: 12px;
}
.process-list{
font-size: 0;
padding-left: 30px;
padding-right: 40px;
position: relative;
}
.process-list .process-item{
width: 33.33%;
display: inline-block;
vertical-align: top;
}
.line-step{
text-align: center;
position: relative;
}
.line-step:before{
content: '';
display: block;
width: 100%;
height: 2px;
background: #E5E5E5;
position: absolute;
top: 7px;
}
.circle-orange{
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
background: #E5E5E5;
border-radius: 50%;
position: absolute;
top: 110px;
vertical-align: top;
z-index: 3;
}
.circle-orange.active{
background: #F95714;
}
.btn-prev{
left: 0px;
}
.btn-prev:before{
content: '';
display: inline-block;
width: 10px;
height: 10px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: rotate(45deg);
position: absolute;
top: 9px;
left: 12px;
z-index: 10;
}
.btn-next{
right: 0;
}
.btn-next:before{
content: '';
display: inline-block;
width: 10px;
height: 10px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: rotate(-45deg);
position: absolute;
top: 9px;
left: 7px;
z-index: 10;
}
.circle-icon{
box-sizing: content-box;
display: inline-block;
width: 10px;
height: 10px;
background: #F95714;
border:3px solid rgb(250, 209, 192);
border-radius: 50%;
vertical-align: top;
position: relative;
}
</style>
这样就好了,样式需要自己调。