vue实现内容过长添加左右按钮进行滑动_vue 超长div左右按钮滑动组件-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46774564/article/details/123473476

这是一个关于文件路径导航和横向滚动条控制的组件实现。通过`v-if`和`v-for`指令动态显示文件路径，并提供了返回上一级和跳转到所有文件的选项。组件还实现了左右箭头按钮，用于平滑滚动菜单列表。当容器宽度小于列表宽度时，按钮显示，允许用户查看超出视口的文件。同时，`navOffset`变量用于跟踪菜单列表的偏移量，确保平滑滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

            <div class="wrapper">
              <span @click.stop="toLeft" v-if="showButton" class="prev all"
                ><i class="el-icon-arrow-left"></i
              ></span>
              <span @click.stop="toRight" v-if="showButton" class="next all"
                ><i class="el-icon-arrow-right"></i
              ></span>
              <div class="scroll-wrapper" ref="scrollWrapper">
                <div
                  class="menu-lists"
                  :style="{
                    transform: `translateX(-${navOffset}px)`,
                    transition: 'transform .3s',
                  }"
                  ref="menuLists"
                >
                  <div class="form-title" style="user-select: none;">
                      <span v-if="filePathList.length"><span :class="{ 'link-hoverline': filePathList.length }" @click="handleGoBack">返回上一级</span> | </span>
                      <span :class="{ 'link-hoverline': filePathList.length }" @click="handleGoToAll">所有文件</span>
                      <span v-for="(item, index) in filePathList" :key="index"> >
                          <span :class="{ 'link-hoverline': index!== filePathList.length - 1}" @click="handleLastGoTo(item, index)">{{ item.fileName }}</span>
                      </span>
                  </div>
                </div>
              </div>
            </div>

      navOffset: 0,
      showButton: false,

  mounted() {
    this.checkButtonStatus()
    window.addEventListener('resize', this.checkButtonStatus)
  },
  beforeDestroyed() {
    window.removeEventListener('resize')
  },
  watch: {
    filePathList: {
      handler() {
        this.$nextTick(() => {
          this.checkButtonStatus()
          this.navOffset =
          this.$refs.menuLists.offsetWidth -
          this.$refs.scrollWrapper.offsetWidth
        })
      }
    }
  },

    toLeft() {
      const containerSize = this.$refs.scrollWrapper.offsetWidth
      this.navOffset = Math.max(
        0,
        this.navOffset - containerSize / 2
      )
    },
    toRight() {
      const containerSize = this.$refs.scrollWrapper.offsetWidth
      const navSize = this.$refs.menuLists.offsetWidth
      this.navOffset = Math.min(
        this.navOffset + containerSize / 2,
        navSize - containerSize
      )
    },
    checkButtonStatus() {
      if (!this.$refs.scrollWrapper) return
      const containerSize = this.$refs.scrollWrapper.offsetWidth
      const navSize = this.$refs.menuLists.offsetWidth
      const currentOffset = this.navOffset
      if (containerSize < navSize) {
        if (navSize - currentOffset < containerSize) {
          this.navOffset = navSize - containerSize
        }
      } else {
        if (currentOffset > 0) {
          this.navOffset = 0
        }
      }
      this.showButton = navSize > containerSize
    },

.wrapper {
  width: 100%;
  position: relative;
  display: flex;
  flex: row nowrap;
  .all {
    position: absolute;
    cursor: pointer;
    color: #909399;
    line-height: 41px;
  }
  .prev {
    left: 0;
  }
  .next {
    right: 0;
  }
  .scroll-wrapper {
    margin: 0 20px;
    box-sizing: border-box;
    overflow: hidden;
    display: inline-block;
  }
  .menu-lists {
    display: inline-block;
    white-space: nowrap;
  }
}