** Vue下js点击按钮元素左右滚动效果 **

** Vue下js点击按钮元素左右滚动效果 **

小程序、前端交流群：609690978

                                    先上效果图

代码：

<div id="classifyScroll" :class="showLeftIcon ? 'active' : ''">
    <div class="classifys">
      <van-icon name="arrow" class="rightIcon" v-show="showRightIcon" @click="rightClick" />
      <van-icon name="arrow-left" class="leftIcon" v-show="showLeftIcon" @click="leftClick" />
      <p class="classifys-item" v-for="(item, index) in classify" :key="index" :ref="`item${index}`">{{ item.name }}p>
    div>
  div>

export default {
  data() {
    return {
      showRightIcon: true, // 是否显示右箭头
      maxClickNum: 0, // 最大点击次数
      lastLeft: 0, // 上次滑动距离
      clickNum: 0, // 点击次数
      classify: [{ name: '牛仔裤' }, { name: '夹克' }, { name: '衬衫' }, { name: '卫衣' }, { name: '皮夹克' }, { name: '玩儿' }, { name: '长裙' }, { name: '短裙' }, { name: '鞋' }]
    }
  },
  computed: {
    showLeftIcon() {
      return this.clickNum > 0
    }
  },
  methods: {
    // 点击右箭头（左侧滚动）
    rightClick() {
      // 如果点击次数小于数组长度-1时，执行左滑动效果。
      if (this.clickNum < this.classify.length - 1) {
        // 获取当前元素宽度
        let width = document.querySelectorAll('.classifys-item')[this.clickNum].offsetWidth
        // 获取最后一个元素距离左侧的距离
        let lastItemOffsetLeft = document.getElementsByClassName('classifys-item')[this.classify.length - 1].offsetLeft
        // 获取可视区域宽度
        const lookWidth = document.getElementById('classifyScroll').clientWidth
        // 如果最后一个元素距离左侧的距离大于可视区域的宽度，表示最后一个元素没有出现，执行滚动效果
        if (lastItemOffsetLeft > lookWidth) {
          // 公示：滚动距离（元素的magin-left值） = 负的它自己的长度 + 上一次滑动的距离
          document.getElementsByClassName('classifys')[0].style.marginLeft = `${-width + this.lastLeft}px`
          this.lastLeft = -width + this.lastLeft
          // 点击次数+1
          this.clickNum += 1
          // 记录到最后一个元素出现在可视区域时，点击次数的最大值。用于后面点击左侧箭头时判断右侧箭头的显示
          this.maxClickNum = this.clickNum
        }
        /* 
          如果最后一个元素距离左侧的距离大于可视距离+自身的宽度，说明没有到最后一个, 显示右侧箭头，否则隐藏右侧箭头
          注意：这里要加上其自身的宽度，否则要多点击一下才会隐藏。因为点击的时候实际上最后一个元素还没有滚动，
          它距离左侧的距离是大于可视区域的（也就是说获取的是上一次点击之后，距离左侧的距离）
          所以这里要加上其自身的宽度
          看不懂的话不用管，反正加上就对了
        */
        this.showRightIcon = lastItemOffsetLeft > lookWidth + width
      }
    },
    // 点击左箭头（右侧滚动）
    leftClick() {
      // console.log(this.lastLeft, 'lastLeft')
      // console.log(document.querySelectorAll('.classifys-item')[this.clickNum - 1].offsetWidth, '上一个的宽度')
      // 当点击次数大于0时才触发，这样当点击次数clickNum等于1的到时候，clickNum--等于0.根据计算属性的判断会隐藏掉左箭头
      if (this.clickNum > 0) {
        // 获取当前元素宽度
        let width = document.querySelectorAll('.classifys-item')[this.clickNum - 1].offsetWidth
        // 公示：滚动距离（元素的magin-left值） = 它自己的长度 + 上一次滑动的距离
        document.getElementsByClassName('classifys')[0].style.marginLeft = `${this.lastLeft + width}px`
        this.lastLeft = width + this.lastLeft
        // 点击次数-1
        this.clickNum--
        // 如果点击次数小于最大点击次数，说明最后一个元素已经不在可是区域内了，显示右箭头
        if (this.clickNum < this.maxClickNum) {
          this.showRightIcon = true
        }
      }
    }
  }
}

// 这里是用的scss
@function px($px) {
  @return $px * 2px;
}
#classifyScroll {
  padding: px(18) 0 px(15);
  width: 95%;
  overflow: hidden;
  transition: all 0.3s;
  &.active {
    transition: all 0.3s;
    width: 90%;
    margin: 0 auto;
  }
  .classifys {
    // 注意一下，这里没有用position: relative，，而图标用了position:absolute。因为这个东西是准备做组件的，我把相对定位写在父级的css标签上了。
    transition: all 0.3s;
    display: flex;
    align-items: center;
    .rightIcon {
      position: absolute;
      right: px(-5);
      bottom: 47%;
      transform: translate(0, 50%);
      z-index: 9;
    }
    .leftIcon {
      position: absolute;
      left: px(-5);
      bottom: 47%;
      transform: translate(0, 50%);
      z-index: 9;
    }
    &-item {
      font-size: px(11);
      font-weight: 400;
      color: #ffffff;
      line-height: px(16);
      // margin-right: px(52);
      padding-right: px(52);
      white-space: nowrap;
    }
  }
}