vue自定义单向列表(横向或纵向)

template部分

<div class="dataNavPrev"
                 @click="navPrev">
              <svg t="1650615093887"
                   class="icon"
                   viewBox="0 0 1024 1024"
                   version="1.1"
                   xmlns="http://www.w3.org/2000/svg"
                   p-id="2210"
                   width="32"
                   height="32">
                <path d="M511.29 230.03L867.8 544.02l56.4-64.04-413.02-363.76L99.74 480.04l56.52 63.92z"
                      p-id="2211"
                      fill="#ffffff"></path>
                <path d="M99.74 817.1l56.52 63.93L511.29 567.1 867.8 881.09l56.4-64.04-413.02-363.76z"
                      p-id="2212"
                      fill="#ffffff"></path>
              </svg>
            </div>
			<!-- ref绑定列表盒子ul列表 -->
            <ul ref="dataNavList"
                style="height: 630px;overflow: hidden;">
             <li  :style="{transform:'translateY(-'+move+'px)'}"> v-for="item in list">{{item.name}}</li>
            </ul>
            <div class="dataNavNext"
                 @click="navNext">
              <svg t="1650615138027"
                   class="icon"
                   viewBox="0 0 1024 1024"
                   version="1.1"
                   xmlns="http://www.w3.org/2000/svg"
                   p-id="2570"
                   width="32"
                   height="32">
                <path d="M511.29 793.97L156.26 480.04l-56.52 63.92 411.44 363.81L924.2 544.02l-56.4-64.04z"
                      p-id="2571"
                      fill="#ffffff"></path>
                <path d="M924.2 206.95l-56.4-64.04L511.29 456.9 156.26 142.97 99.74 206.9l411.44 363.81z"
                      p-id="2572"
                      fill="#ffffff"></path>
              </svg>
            </div>

css部分

css部分根据自己想法来

.dataNavPrev {
  margin-bottom: 10px;
  
}
.dataNavNext,.dataNavPrev {
  width: 100%;
  display: flex;
  cursor: pointer;
  justify-content: center;
}

js部分

data(){
	return {
	  // 列表移动的距离
      move: 0,
      // 如果要改成横向 把这个JS里的内容的Height改为Weight
      dataNavListRealHeight: 0,
      dataNavListViewHeight: 0,
	}
}


    handleNavScroll() {
      // scrollWidth获取整个菜单实际高度
      // 如果要改成横向 把这个JS里的内容的Height改为Weight
      this.dataNavListRealHeight = this.$refs.dataNavList.scrollHeight;
      // offsetWidth获取菜单在当前页面可视高度
      // 如果要改成横向 把这个JS里的内容的Height改为Weight
      this.dataNavListViewHeight = this.$refs.dataNavList.offsetHeight;
      //实际宽度减去可视宽度就是可移动的范围即move的范围
      
      // 窗口大小变化时触发。实时更新可视宽度
      // 如果要改成横向 把这个JS里的内容的Height改为Weight
      window.onresize = () => {
        return (() => {
          this.dataNavListViewHeight = this.$refs.dataNavList.offsetHeight;
          //注1，详见下方
          if (
            this.move >
            this.dataNavListRealHeight - this.dataNavListViewHeight - 60
          ) {
            this.move = this.dataNavListRealHeight - this.dataNavListViewHeight;
          }
        })();
      };
    },
    // 当菜单项向右的可移动距离大于单个菜单项的宽度时，move减去一个菜单项的宽度（即右移移动一个菜单项的宽度），
    // 当菜单项向右的可移动距离小于单个菜单项的宽度时，move等于0（即回到最开始没有移动的状态）
    navPrev() {
      if (this.move > 60) {
        this.move = this.move - 60;
      } else {
        this.move = 0;
      }
    },
    // 当菜单项向左的可移动距离大于单个菜单项的宽度时，move减去一个菜单项的宽度（即左移移动一个菜单项的宽度），
    // 当菜单项向左的可移动距离小于单个菜单项的宽度时，move等于可以向左移动的最大值（即到最末尾）
    // 如果要改成横向 把这个JS里的内容的Height改为Weight
    navNext() {
      if (
        this.move <
        this.dataNavListRealHeight - this.dataNavListViewHeight - 60
      ) {
        this.move = this.move + 60;
      } else {
        this.move = this.dataNavListRealHeight - this.dataNavListViewHeight;
      }
    },

使用方法：注意！！！（如果列表为请求得到的数据，需要在请求里写，并且在nextTick里调用该方法；如果数据固定在页面data里，则在生命周期mounted调用该方法即可）

    getData(){
      api.getData().then(res => {
        this.$nextTick(() => {
            this.handleNavScroll();
        });
      })
    },