Vue +Ts | 点击左右按钮可滑动的列表

效果：

功能点：

1. 点击tab1和tab2切换不同的列表
2. 点击左右按钮滑动列表且每次滑动多列

思路分析：

具体思路如下：

1. 利用flex布局将列表横向排列
2. 超出列表显示区域的隐藏
3. 点击左右按钮时让列表滚动起来，我此处使用的transform: translateX(xxpx)

实现代码：

1. 定义变量

  const xz_xx: any = ref(null);//tab1对应的盒子
  const zd_xx: any = ref(null);// tab2对应的盒子
  const xzzd_xx_width = ref(84); // 限定一格宽度
  const xzzd_xx_num = ref(-5); // 限定一次跳多少格
  const xxx: any = ref(0); //滑动的格数

2.画页面
3.左右箭头绑定事件

 function leftmove() {
    // 小于xzzd_xx_num时一次滑动xzzd_xx_num个 否则变为0 如 -5+5=0
    if (xxx.value == 0) return;
    if (xxx.value <= xzzd_xx_num.value) {
      xxx.value += Math.abs(xzzd_xx_num.value);
    } else {
      xxx.value += Math.abs(xxx.value);
    }
  }
  function rightmove() {
    let clientWidth = 0,
      ulWidth = 0;
    if (showtown.value) {
      clientWidth = xz_xx.value.clientWidth; // 容器宽度
      ulWidth = optionsxzxz.value.length * xzzd_xx_width.value;
    } else {
      clientWidth = zd_xx.value.clientWidth;
      ulWidth = optionsxzzd.value.length * xzzd_xx_width.value;
    }
    let maxXXX = (ulWidth - clientWidth) / xzzd_xx_width.value; // 最大可移动数字
    if (maxXXX <= 0) return;
    if (-maxXXX < xzzd_xx_num.value && xxx.value > xzzd_xx_num.value) {
      xxx.value -= Math.abs(xzzd_xx_num.value);
    } else {
      xxx.value -= maxXXX + xxx.value;
    }
  }