本文例項為大家分享了實現左右點選滾動，效果如圖

涉及功能點

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="vue實現左右點選滾動效果" />
    </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="vue實現左右點選滾動效果" />
       </div>
       <!-- 最後一個不展示箭頭 -->
       <img
        v-if="progressList.length > indexP + 1"
        :src="iconArrow"
        alt="vue實現左右點選滾動效果"
        class="arrowSquare"
       />
      </div>
     </div>
    </div>

    <div :class="noScrollRight ? 'arrow' : 'arrow arrowOpacity'" @click="fnNext(activeName)">
     <img :src="arrowR" alt="vue實現左右點選滾動效果" />
    </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: '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 res
 
ult = 0;
   if (type === 'reduce') {
    result = 215;
   } else if (type === 'add') {
    result = -215;
   } else {
    result = 0;
   }
   this.scrollResultWidth += result;
  },}
};
</script>
<style lang="s" 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;
  phttp://www.cppcns.com
 
adding: 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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。