v-for内所有div中的内容（多行多列）全部自适应自动左右滚动（适用于表格）vue2

qq_36489355

已于 2024-07-25 16:47:46 修改

阅读量326

点赞数 12

文章标签：前端 javascript html

于 2024-07-25 16:43:42 首次发布

本文链接：https://blog.csdn.net/qq_36489355/article/details/140693331

版权

html部分

 <div class="table_content">
            <div v-for="(item, outerIndex) in table2Data"  :key="outerIndex"           style="display: flex">
              <div
                style="width: 33%"
                v-for="(data,innerIndex) in item.list"
                :key="`${outerIndex}-${innerIndex}`" class="scroll-container"
                :ref="`scrollContainer-${outerIndex}-${innerIndex}`"
                @mouseenter="pauseScroll(outerIndex, innerIndex)"
                @mouseleave="resumeScroll(outerIndex, innerIndex)"
                @click="getOne(item)"
              >
                <div class="scrollable-content">
                  {{ data }}
                </div>
              </div>

            </div>
        </div>

css部分

.table_content{
      width: 100%;
      height: calc(100% - 2.12rem);
      overflow: auto;
      color: #999999;

      tr{
        font-size: 1.25rem;
        height: 1.9rem;
      }
    }

    .table_content::-webkit-scrollbar{
      height: 0;
      width: 0;
    }
.scroll-container{
  //overflow-x: auto;
  //text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  margin-right: 0.5rem;
  text-align: center;
}

.scroll-container{
  overflow-x: auto;
}
.scroll-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

js部分

data(){
   return:{
         table2Data: [
        {
          name: 'xxxx实业有限公司',
          timeLimit: '2021.1~2023.2',
          region: '1层A区',
          list:[11111111111111111111,1111111111111111111,1111111111111111111111],
        },
        {
          name: 'xxxx实业有限公司',
          timeLimit: '2021.1~2023.2',
          region: '1层A区',
          list:[11111111111111111111,1111111111111111111,1111111111111111111111],
        },
      ],
    }
},
mounted:{
    setTimeout(()=>{
        this.startAutoScroll()
      },1000)
},

methods:{
startAutoScroll() {
      this.table2Data.forEach((item, outerIndex) => {
        item.list.forEach((_, innerIndex) => {
          this.scrollPositions[outerIndex] = this.scrollPositions[outerIndex] || [];
          this.scrollPositions[outerIndex][innerIndex] = 0;
          this.scrollTimers[`${outerIndex}-${innerIndex}`] = setInterval(() => {
            let container = this.$refs[`scrollContainer-${outerIndex}-${innerIndex}`][0]
            if (container.scrollWidth > container.clientWidth) {
              container.scrollLeft += 1; // 水平向右滚动
              if (container.scrollLeft >= container.scrollWidth - container.clientWidth) {
                container.scrollLeft = 0; // 滚动到最右侧后重置到最左侧
              }
            }
          }, 100);
        });
      });
    },
pauseScroll(outerIndex, innerIndex) {
      const timerKey = `${outerIndex}-${innerIndex}`;
      if (this.scrollTimers[timerKey]) {
        clearInterval(this.scrollTimers[timerKey]);
        delete this.scrollTimers[timerKey];
      }
    },
    resumeScroll(outerIndex, innerIndex) {
      const timerKey = `${outerIndex}-${innerIndex}`;
      if (!this.scrollTimers[timerKey]) {
        this.scrollTimers[timerKey] = setInterval(() => {
          let container = this.$refs[`scrollContainer-${outerIndex}-${innerIndex}`][0]
          if (container.scrollWidth > container.clientWidth) {
            container.scrollLeft += 1; // 水平向右滚动
            if (container.scrollLeft >= container.scrollWidth - container.clientWidth) {
              container.scrollLeft = 0; // 滚动到最右侧后重置到最左侧
            }
          }
        }, 100);
      }
    },
},