在for循环中自定义左右轮播切换，for循环中使用ref获取dom元素

需求：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;
}