Vue.js如何实现点击上下按钮控制列表上下滑动的交互效果

#

实现思路 #

• 通过控制列表容器ul的scrollTop属性实现上下滚动
• 点击Up按钮时减小scrollTop值实现上滑，点击Down按钮时增大scrollTop值实现下滑
• 增加边界校验，避免滚动超出内容范围
• 用scrollTo方法的smooth参数实现平滑滑动效果

完整实现代码 #

CSS 样式（仅在原有基础上补充了li的基础样式）

.main ul {
  height: 100px;
  width: 200px;
  background: gray;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
.main li {
  height: 30px;
  line-height: 30px;
  list-style: none;
  padding: 0 10px;
}
.main a {
  margin: 10px 0;
  display: block;
  cursor: pointer;
}

Vue 模板部分

<div id="app">
  <div class="main">
    <a @click.prevent="scrollUp">Up</a>
    <ul ref="listContainer">
      <li>dropdown 1</li>
      <li>dropdown 2</li>
      <li>dropdown 3</li>
      <li>dropdown 4</li>
      <li>dropdown 5</li>
      <li>dropdown 6</li>
      <li>dropdown 7</li>
      <li>dropdown 8</li>
      <li>dropdown 9</li>
      <li>dropdown 10</li>
      <li>dropdown 11</li>
      <li>dropdown 12</li>
    </ul>
    <a @click.prevent="scrollDown">Down</a>
  </div>
</div>

Vue 逻辑部分（Vue2选项式API写法）

new Vue({
  el: '#app',
  data() {
    return {
      // 每次滚动的步长，当前设置和li高度一致，每次滚动一行
      step: 30
    }
  },
  methods: {
    scrollUp() {
      const list = this.$refs.listContainer
      // 上滑边界：最小滚动值为0
      const targetScroll = Math.max(list.scrollTop - this.step, 0)
      list.scrollTo({
        top: targetScroll,
        behavior: 'smooth'
      })
    },
    scrollDown() {
      const list = this.$refs.listContainer
      // 下滑边界：最大滚动值 = 内容总高度 - 容器可视高度
      const maxScroll = list.scrollHeight - list.clientHeight
      const targetScroll = Math.min(list.scrollTop + this.step, maxScroll)
      list.scrollTo({
        top: targetScroll,
        behavior: 'smooth'
      })
    }
  }
})

如果使用Vue3组合式API，仅需要把ref获取方式改成const listContainer = ref(null)，方法内操作时用listContainer.value即可，滚动逻辑完全通用。
调整step参数可以自定义每次滚动的幅度，去掉behavior: 'smooth'可以关闭平滑滚动效果。

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