vue实现左右点击滚动效果

本文实例为大家分享了vue实现左右点击滚动，效果如图

涉及功能点

1、在created中使用r e f s 结 合 refs结合refs结合nextTick仍然无法获取到元素的问题：添加定时器

2、左右按钮是否可点击根据数据以及当前分辨率可放下的个数确认

3、可适应不同分辨率下的情况

代码

<!--  -->
<template>
  <div>
    <div class="ProgressBoxTool" v-if="progressList && progressList.length">
      <div class="processBox">
        <div :class="currentClickNumber > 0 ? 'arrow' : 'arrow arrowOpacity'" @click="fnPrev()">
          <img :src="arrowL" alt="" />
        </div>
        <div class="fixedBox" :ref="`fixedBox`">
          <div
            class="centerScroll"
            :style="
              `width:${signleWidth *
                progressList.length}px;transform:translate(${scrollResultWidth}px,0);transition:1s;`
            "
          >
            <div
              class="signleTab"
              v-for="(itemP, indexP) in progressList"
              :key="indexP + 'progress'"
            >
              <div class="leftIcon">
                <img class="pregressIcon" :src="icon" alt="" />
              </div>
              <!-- 最后一个不展示箭头 -->
              <img
                v-if="progressList.length > indexP + 1"
                :src="iconArrow"
                alt=""
                class="arrowSquare"
              />
            </div>
          </div>
        </div>

        <div :class="noScrollRight ? 'arrow' : 'arrow arrowOpacity'" @click="fnNext(activeName)">
          <img :src="arrowR" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import arrowL from '@/assets/images/emergency/arrowL.png';
import arrowR from '@/assets/images/emergency/arrowR.png';
import icon from '@/assets/images/emergency/icon.png';
import iconArrow from '@/assets/images/emergency/iconArrow.png';
export default {
  components: {},
  data() {
    return {
      progressList: [
        { type: '1' },
        { type: '2' },
        { type: '1' },
        { type: '2' },
        { type: '1' },
        { type: '2' },
        { type: '1' },
        { type: '2' },
        { type: '1' },
        { type: '2' }
      ],
      arrowL,
      arrowR,
      icon,
      iconArrow,
      currentProgressId: '',
      scrollResultWidth: 0, //transform滚动的距离
      signleWidth: 215, //单个流程的宽度
      activeName: 0,
      currentClickNumber: 0,
      noScrollRight: true
    };
  },
  created() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.initgoRightArrow();
      });
    });
  },
  methods: {
    //初始化判断是否可以向右滚动
    initgoRightArrow() {
      const currentScrollWidth = this.$refs[`fixedBox`].clientWidth;
      const canNumber = Math.floor(currentScrollWidth / this.signleWidth); //可以放下的个数
      //如果最后一个流程图标已经展示出来，则停止滚动
      if (this.currentClickNumber + canNumber >= this.progressList.length) {
        this.noScrollRight = false;
        return;
      }
    },
    //点击上一个
    fnPrev() {
      //如果右点击的次数大于0，才可以左滚
      if (this.currentClickNumber > 0) {
        this.currentClickNumber -= 1;
        this.noScrollRight = true;
        this.fnScrollWidth('reduce');
      } else {
        return false;
      }
    },
    //点击下一个
    fnNext() {
      const currentScrollWidth = this.$refs[`fixedBox`].clientWidth;
      const canNumber = Math.floor(currentScrollWidth / this.signleWidth); //可以放下的个数
      //如果最后一个流程图标已经展示出来，则停止滚动
      if (this.currentClickNumber + canNumber >= this.progressList.length) {
        return;
      }
      //说明放不下有滚动条
      if (this.progressList.length > canNumber) {
        this.currentClickNumber += 1;
        if (this.currentClickNumber + canNumber >= this.progressList.length) {
          this.noScrollRight = false;
        }
        this.fnScrollWidth('add');
      }
    },
    //translate的宽度
    fnScrollWidth(type) {
      let result = 0;
      if (type === 'reduce') {
        result = 215;
      } else if (type === 'add') {
        result = -215;
      } else {
        result = 0;
      }
      this.scrollResultWidth += result;
    },
  }
};
</script>
<style lang="scss" scoped>
//中间的时间发展部分
.processBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .arrow {
    width: 60px;
    cursor: pointer;
  }
  .arrowOpacity {
    cursor: default;
    opacity: 0.4;
  }
  .fixedBox {
    flex: 1;
    overflow: hidden;
  }
  .centerScroll {
    // flex: 1;
    box-sizing: border-box;
    padding: 20px 0;
    white-space: nowrap;
    // width: calc(100% - 120px);
    // overflow-x: auto;
    .signleTab {
      width: 215px;
      position: relative;
      display: inline-block;
      .leftIcon {
        width: 150px;
        text-align: center;
        cursor: pointer;
        & > .pregressIcon {
          width: 60px;
          height: 60px;
        }
      }
      & > .arrowSquare {
        position: absolute;
        top: 25px;
        right: 0;
      }
    }
  }
}
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。