如何在Vue 2/Nuxt.js轮播组件中隐藏上一页和下一页按钮？

需要实现的轮播交互规则：

• 初始状态隐藏「上一页」按钮
• 点击「下一页」按钮滑动后，显示「上一页」按钮
• 滑动到轮播项目末尾时，隐藏「下一页」按钮

模板代码 #

<div class="main-container">
  <div class="carousel-container position-relative" ref="container">
    <div class="carousel-inner overflow-hidden">
      <div class="carousel-track" ref="track" @scroll="handleScroll">
        <nuxt-link to="" class="card-container" v-for="(index, i) in 9" :key="i">
          <div class="card"></div>
        </nuxt-link>
      </div>
    </div>
    <div class="btns-container">
      <button class="prevBtn" @click="prev" v-show="canShowPrev">
        prev
      </button>
      <button class="nextBtn" @click="next" v-show="canShowNext">
        next
      </button>
    </div>
  </div>
</div>

脚本代码 #

export default {
  data() {
    return {
      canShowPrev: false,
      canShowNext: true
    }
  },
  methods: {
    next() {
      const track = this.$refs.track
      const item = track.querySelector('.card-container')
      track.scrollLeft += item.clientWidth
      this.updateButtonStatus()
    },
    prev() {
      const track = this.$refs.track
      const item = track.querySelector('.card-container')
      track.scrollLeft -= item.clientWidth
      this.updateButtonStatus()
    },
    handleScroll() {
      this.updateButtonStatus()
    },
    updateButtonStatus() {
      const track = this.$refs.track
      // 判断是否在起始位置：隐藏prev按钮
      this.canShowPrev = track.scrollLeft > 0
      // 判断是否到达末尾：scrollLeft + 容器可视宽度 < 总滚动宽度时显示next按钮
      this.canShowNext = track.scrollLeft + track.clientWidth < track.scrollWidth
    }
  },
  mounted() {
    // 初始化时检查按钮状态
    this.updateButtonStatus()
  }
}

样式代码 #

.carousel-track{
  display: flex;
  overflow: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.card-container{
  flex-shrink: 0;
  scroll-snap-align: start;
  /* 给卡片设置固定宽度，确保滑动距离准确 */
  width: 200px;
  padding: 0 8px;
}

.card {
  width: 100%;
  height: 250px;
  background-color: #f0f0f0;
  border-radius: 8px;
}

.btns-container button{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  padding: 8px 16px;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
}

.prevBtn{
  left: -1rem;
}

.nextBtn{
  right: -1rem;
}

关键改动说明 #

1. 响应式状态控制：新增canShowPrev和canShowNext两个响应式变量，通过v-show直接绑定按钮的显示/隐藏状态
2. 统一状态更新逻辑：封装updateButtonStatus方法，通过滚动位置判断按钮状态：
   • 当轮播处于起始位置（scrollLeft为0）时，隐藏「上一页」按钮
   • 当轮播到达末尾（滚动距离+容器宽度 >= 总滚动宽度）时，隐藏「下一页」按钮
3. 滚动事件监听：给轮播轨道添加scroll事件监听，确保手动拖动滚动时按钮状态也能实时更新
4. Vue化DOM操作：使用$refs替代原生document.querySelector，更符合Vue组件化开发规范

内容的提问来源于stack exchange，提问作者user19610519