vue實現(xiàn)左右點擊滾動效果
本文實例為大家分享了vue實現(xiàn)左右點擊滾動,效果如圖
涉及功能點
1、在created中使用r e f s 結(jié) 合 refs結(jié)合refs結(jié)合nextTick仍然無法獲取到元素的問題:添加定時器
2、左右按鈕是否可點擊根據(jù)數(shù)據(jù)以及當(dāng)前分辨率可放下的個數(shù)確認(rèn)
3、可適應(yīng)不同分辨率下的情況
代碼
<!-- ?--> <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); //可以放下的個數(shù) ? ? ? //如果最后一個流程圖標(biāo)已經(jīng)展示出來,則停止?jié)L動 ? ? ? if (this.currentClickNumber + canNumber >= this.progressList.length) { ? ? ? ? this.noScrollRight = false; ? ? ? ? return; ? ? ? } ? ? }, ? ? //點擊上一個 ? ? fnPrev() { ? ? ? //如果右點擊的次數(shù)大于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); //可以放下的個數(shù) ? ? ? //如果最后一個流程圖標(biāo)已經(jīng)展示出來,則停止?jié)L動 ? ? ? 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> //中間的時間發(fā)展部分 .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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- VUE中鼠標(biāo)滾輪使div左右滾動的方法詳解
- vue左右側(cè)聯(lián)動滾動的實現(xiàn)代碼
- vue 導(dǎo)航錨點_點擊平滑滾動,導(dǎo)航欄對應(yīng)變化詳解
- vue tab滾動到一定高度,固定在頂部,點擊tab切換不同的內(nèi)容操作
- vue中實現(xiàn)點擊按鈕滾動到頁面對應(yīng)位置的方法(使用c3平滑屬性實現(xiàn))
- vue+導(dǎo)航錨點聯(lián)動-滾動監(jiān)聽和點擊平滑滾動跳轉(zhuǎn)實例
- vue監(jiān)聽滾動事件實現(xiàn)滾動監(jiān)聽
- Vue.js實戰(zhàn)之通過監(jiān)聽滾動事件實現(xiàn)動態(tài)錨點
- vue實現(xiàn)消息的無縫滾動效果的示例代碼
- vue中使用vue-router切換頁面時滾動條自動滾動到頂部的方法
相關(guān)文章
Vue?3?使用moment設(shè)置顯示時間格式的問題及解決方法
在Vue?3中,因為過濾器(filter)已經(jīng)被廢棄,取而代之的是全局方法(global?method),本文給大家介紹Vue?3?使用moment設(shè)置顯示時間格式的問題及解決方法,感興趣的朋友一起看看吧2023-12-12關(guān)于vue中如何監(jiān)聽數(shù)組變化
這篇文章主要介紹了關(guān)于vue中如何監(jiān)聽數(shù)組變化,對vue感興趣的同學(xué),必須得參考下2021-04-04vue+echarts實現(xiàn)動態(tài)繪制圖表及異步加載數(shù)據(jù)的方法
vue寫的后臺管理,需要將表格數(shù)據(jù)繪制成圖表(折線圖,柱狀圖),圖表數(shù)據(jù)都是通過接口請求回來的。這篇文章主要介紹了vue+echarts 動態(tài)繪制圖表及異步加載數(shù)據(jù)的相關(guān)知識,需要的朋友可以參考下2018-10-10