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>
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- Vue Element-ui實現樹形控件節點添加圖標詳解
- vue如何在data中引入圖片的正確路徑
- Vue一個動態添加background-image的實現
- vue頁面圖片不顯示問題解決方案
- vue3.x使用swiperUI動態加載圖片失敗的解決方法