blogs

点击左右滑动

怡然

250字小于1分钟

自用小组件

2024-05-31

相关信息

示例图片

如上图所示，要实现一个类似element-ui中tabs的效果，但由于样式原因不能直接使用，所以自己封装了一个小组件使用。

<!-- 可滑动区域和操作可滑动区域的按钮 -->
<div class="scrollTab" id="scrollTab">
  <i class="el-icon-arrow-left" @click="leftClick"></i>
  <!-- 显示tab -->
  <div id="classifyScroll">
    <!-- 可滑动区 -->
    <div class="classifys">
      <!-- 单个tab -->
      <div class="classifys-item" :class="index == currentFlowIndex ? 'classifys-activeItem' : 'classifys-item'"
        v-for="(item, index) in list" :key="index" :ref="`item${index}`"
        @click="change(item, index)">
        <p>{{ item.label }}</p>
      </div>
    </div>
  </div>
  <i class="el-icon-arrow-right" @click="rightClick"></i>
</div>

// 点击左滑
leftClick() {
  if (!this.showIcon) return
  if (document.getElementsByClassName('classifys')[0].offsetLeft >= -60) { // 每次点击滑动60px
    document.getElementsByClassName('classifys')[0].style.left = 0 + 'px';
  } else {
    document.getElementsByClassName('classifys')[0].style.left = document.getElementsByClassName('classifys')[0].offsetLeft + 60 + 'px';
  }
},
// 点击右滑
rightClick() {
  if (!this.showIcon) return
  if (
    document.getElementsByClassName('classifys')[0].scrollWidth +
    document.getElementsByClassName('classifys')[0].offsetLeft -
    60 <=
    document.getElementById('classifyScroll').offsetWidth
  ) {
    document.getElementsByClassName('classifys')[0].style.left =
      document.getElementById('classifyScroll').offsetWidth -
      document.getElementsByClassName('classifys')[0].scrollWidth +
      'px';
  } else {
    document.getElementsByClassName('classifys')[0].style.left =
      document.getElementsByClassName('classifys')[0].offsetLeft - 60 + 'px';
  }
},