需求:for循环列表,每个列表中都有一个左右轮播切换
解决方法:点击左右切换时,使用ref获取当前点击的需要切换的元素
代码如下:
html
使用 id 做循环列表 列表元素独一的ref :ref="'openAreaPeopleNum' + imgItem.id"
<div class="monitoring" v-if="showUnfoldList && !showTimeLine">
<div class="monitoringList">
<div class="monitoringItem" v-for="imgItem in imgList" :key="imgItem.id">
<div class="monitoringTitle">
({{ imgListItem.campus }}){{
imgListItem.addr + imgListItem.roomName
}}
</div>
<div class="monitoringImg">
<img :src="imgItem.boxAiSupervisionList[0].picturePath" alt="" />
</div>
<div class="info">
<div class="rightListBox">
<div class="rightList" :ref="'openAreaPeopleNum' + imgItem.id">
<ul class="carousel">
<li
class="listItem"
v-for="areaPeopleNumItem in imgItem.areaPeopleNumList"
:key="areaPeopleNumItem"
>
<div class="itemTitle">
分区{{ areaPeopleNumItem.num }}人数
</div>
<div class="itemContent">
<img
src="../../assets/img/smart/population_icon.png"
alt=""
/>
<span class="fontSize">{{
areaPeopleNumItem.people
}}</span>
</div>
</li>
<li class="noMore">暂无更多分区</li>
</ul>
</div>
<div
class="arrowLeft"
v-if="imgItem.areaPeopleNumList.length >= 2"
@click.stop="areaArrowLeft('open', imgItem.id)"
></div>
<div
class="arrowRight"
v-if="imgItem.areaPeopleNumList.length >= 2"
@click.stop="areaArrowRight('open', imgItem.id)"
></div>
</div>
</div>
</div>
</div>
</div>
js
使用传入的 id 获取dom元素 eval("vm.$refs.openAreaPeopleNum" + id)[0]
并且滚动条距离变化
// 左右轮播切换(左滑)
areaArrowLeft(data, id) {
console.log(id);
// 每10毫秒移动20,点击一次移动十次,根据自己需要调整
let times = 0;
const interval = 10;
const moveInterval = 27;
const totalTimes = 14;
const vm = this;
// console.log(vm.$refs.openAreaPeopleNum1);
const scroll = () => {
times++;
if (data == "open") {
const moveInterval = 27;
const domCon = eval("vm.$refs.openAreaPeopleNum" + id)[0] // 获取dom元素
// console.log(domCon)
// 获取滚动条的滑动距离
const offset = domCon.scrollLeft;
domCon.scrollLeft = offset - moveInterval;
} else {
const moveInterval = 46;
const offset = vm.$refs.areaPeopleNum.scrollLeft;
vm.$refs.areaPeopleNum.scrollLeft = offset - moveInterval;
}
// console.log(426,offset);
if (times !== totalTimes) {
setTimeout(scroll, interval);
}
};
scroll();
},
// 摄像机轮播(右滑)
areaArrowRight(data, id) {
console.log();
// 每10毫秒移动20,点击一次移动十次,根据自己需要调整
let times = 0;
const interval = 10;
const totalTimes = 14;
const vm = this;
// const domCon = eval('vm.$refs.openAreaPeopleNum' + id)
const scroll = () => {
times++;
if (data == "open") {
const moveInterval = 28;
const domCon = eval("vm.$refs.openAreaPeopleNum" + id)[0];
// console.log(domCon.scrollLeft);
const offset = domCon.scrollLeft;
domCon.scrollLeft = offset + moveInterval;
} else {
const moveInterval = 46;
const offset = vm.$refs.areaPeopleNum.scrollLeft;
vm.$refs.areaPeopleNum.scrollLeft = offset + moveInterval;
}
// console.log(426,offset);
if (times !== totalTimes) {
setTimeout(scroll, interval);
}
};
scroll();
},
css
ul>li 的结构,ul不设置宽度,外面的盒子设置 overflow-x: auto
溢出的部分可以随着滚动条滚动,可以隐藏滚动条,实现左右轮播切换
.monitoringItem .info {
display: flex;
}
.monitoringItem .info .rightList {
width: 100%;
height: 135px;
position: relative;
overflow-x: auto;
}
.monitoringItem {
width: 32.1%;
height: 515px;
background-color: rgba(5, 27, 74, 0.35);
margin: 0 30px 20px 0;
padding: 10px;
border-radius: 6px;
}
.carousel {
height: 100%;
position: absolute;
display: flex;
}
.carouselItem {
width: 257px;
height: 148px;
float: left;
margin-top: 10px;
margin-right: 24px;
}
.carouselItem:last-child {
margin-right: 0;
}
.carouselItem img {
width: 100%;
height: 100%;
}
.monitoringItem:nth-child(3n) {
margin-right: 0;
}
.monitoringItem .monitoringTitle {
width: 100%;
height: 56px;
line-height: 59px;
background: url("../../assets/img/smart/headline_long_picture@3x.png");
background-size: cover;
color: #00ffff;
font-size: 18px;
letter-spacing: 2px;
}
.monitoringImg {
width: 100%;
height: 280px;
margin: 15px 0;
}
.monitoringImg img {
width: 100%;
height: 100%;
}
.monitoringList .monitoringItem .info .listItem {
width: 150px;
height: 117px;
margin: 0 5px;
background: url("../../assets/img/smart/gezi.png") no-repeat;
background-size: cover;
}
.monitoringItem .info .rightListBox {
flex: 1;
position: relative;
}
/* 隐藏摄像头轮播的滚动条 */
.monitoringItem .rightList::-webkit-scrollbar {
display: none;
}
.monitoringItem .rightList::-webkit-scrollbar-thumb {
display: none;
}
.monitoringItem .rightList::-webkit-scrollbar-track {
display: none;
}
.monitoringItem .info .rightListBox .arrowLeft,
.monitoringItem .info .rightListBox .arrowRight {
width: 20px;
height: 20px;
}
.monitoringItem .info .rightListBox .arrowLeft{
left: 0;
}
.monitoringItem .info .rightListBox .arrowRight{
right: 0;
}
.monitoringItem .info .noMore {
width: 150px;
height: 117px;
line-height: 117px;
background: url("../../assets/img/smart/konggezi.png") no-repeat;
background-size: cover;
margin: 0 5px 0;
font-size: 16px;
text-align: center;
color: #00ffff;
}
.monitoringItem .listItem .itemTitle {
color: #00ffff;
line-height: 30px;
width: 125px;
text-align: center;
font-size: 16px;
}
.monitoringItem .listItem .itemContent {
display: flex;
align-items: center;
}
.monitoringItem .listItem .itemContent img {
margin: 18px 7px 18px 15px;
}
.monitoringItem .listItem .itemContent span {
width: 100px;
color: #00ffff;
font-size: 14px;
margin-right: 8px;
text-align: center;
}
.monitoringItem .listItem .itemContent .fontSize {
font-size: 20px;
}