共计 1728 个字符,预计需要花费 5 分钟才能阅读完成。
背景:须要用户头像(3 个)左边局部叠层展现,并且反对循环滚动
实现:
扭转 dom 上绑定的款式 id,论循替换
<template>
<div class="slider-headimg">
<div class="out">
<div class="inner">
<div class="img" ref="headimgList" v-for="(item,index) in sliderHeadimgList" :key="index">
<img :src="item.headImgUrl">
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
sliderHeadimgList: {
type: Array,
default: () => []
}
},
data () {
return {
timer: null,
// 定义地位数组
idArr: ['first', 'second', 'right', 'last']
}
},
mounted () {this.init()
},
destroyed () {if (this.timer) {clearInterval(this.timer)
}
},
methods: {init () {
// 初始化图片地位,依据 id 不同,初始化款式
var img = this.$refs.headimgList
img[0].id = this.idArr[0]
img[1].id = this.idArr[1]
img[3].id = this.idArr[3]
for (let i = 0; i < (this.sliderHeadimgList.length - 4); i++) {this.idArr.splice(3, 0, 'left')
}
this.initialize()
// 定时器图片轮播
this.timer = setInterval(this.next, 1000)
},
next () {
// 将地位数组的最初一个元素删除,并将删除元素增加到地位数组第一个
this.idArr.unshift(this.idArr.pop())
this.initialize()},
// 将地位数组元素作为 id 赋值给 img,达到轮播成果
initialize () {
var img = this.$refs.headimgList
for (var i = 0; i < img.length; i++) {img[i].id = this.idArr[i]
}
}
}
}
</script>
<style lang="less">
.slider-headimg {
position: relative;
display: flex;
align-items: center;
width: 200px;
padding-bottom: 55px;
margin-right: 10px;
}
.out {
width: 100%;
height: 100%;
position: relative;
.inner {
width: 100%;
.img {
width: 48px;
height: 48px;
position: absolute;
transition: 0.3s;
display: flex;
border-radius: 50%;
border: 1px solid #fff;
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
}
// 设置 id 款式
#last {
display: flex;
transform: translateX(48px);
z-index: 3;
opacity: 1;
}
#first {
display: flex;
transform: translateX(96px);
z-index: 2;
opacity: 1;
}
#second {
display: flex;
transform: translateX(144px);
z-index: 1;
opacity: 1;
}
#left {
display: none;
transform: translateX(-48px);
z-index: 1;
opacity: 0;
}
#right {
display: flex;
transform: translateX(240px);
z-index: 1;
opacity: 0;
}
}
</style>
正文完