vue實(shí)現(xiàn)左右點(diǎn)擊滾動(dòng)效果
本文實(shí)例為大家分享了vue實(shí)現(xiàn)左右點(diǎn)擊滾動(dòng),效果如圖
涉及功能點(diǎn)
1、在created中使用r e f s 結(jié) 合 refs結(jié)合refs結(jié)合nextTick仍然無法獲取到元素的問題:添加定時(shí)器
2、左右按鈕是否可點(diǎn)擊根據(jù)數(shù)據(jù)以及當(dāng)前分辨率可放下的個(gè)數(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> ? ? ? ? ? ? ? <!-- 最后一個(gè)不展示箭頭 --> ? ? ? ? ? ? ? <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滾動(dòng)的距離 ? ? ? signleWidth: 215, //單個(gè)流程的寬度 ? ? ? activeName: 0, ? ? ? currentClickNumber: 0, ? ? ? noScrollRight: true ? ? }; ? }, ? created() { ? ? this.$nextTick(() => { ? ? ? setTimeout(() => { ? ? ? ? this.initgoRightArrow(); ? ? ? }); ? ? }); ? }, ? methods: { ? ? //初始化判斷是否可以向右滾動(dòng) ? ? initgoRightArrow() { ? ? ? const currentScrollWidth = this.$refs[`fixedBox`].clientWidth; ? ? ? const canNumber = Math.floor(currentScrollWidth / this.signleWidth); //可以放下的個(gè)數(shù) ? ? ? //如果最后一個(gè)流程圖標(biāo)已經(jīng)展示出來,則停止?jié)L動(dòng) ? ? ? if (this.currentClickNumber + canNumber >= this.progressList.length) { ? ? ? ? this.noScrollRight = false; ? ? ? ? return; ? ? ? } ? ? }, ? ? //點(diǎn)擊上一個(gè) ? ? fnPrev() { ? ? ? //如果右點(diǎn)擊的次數(shù)大于0,才可以左滾 ? ? ? if (this.currentClickNumber > 0) { ? ? ? ? this.currentClickNumber -= 1; ? ? ? ? this.noScrollRight = true; ? ? ? ? this.fnScrollWidth('reduce'); ? ? ? } else { ? ? ? ? return false; ? ? ? } ? ? }, ? ? //點(diǎn)擊下一個(gè) ? ? fnNext() { ? ? ? const currentScrollWidth = this.$refs[`fixedBox`].clientWidth; ? ? ? const canNumber = Math.floor(currentScrollWidth / this.signleWidth); //可以放下的個(gè)數(shù) ? ? ? //如果最后一個(gè)流程圖標(biāo)已經(jīng)展示出來,則停止?jié)L動(dòng) ? ? ? if (this.currentClickNumber + canNumber >= this.progressList.length) { ? ? ? ? return; ? ? ? } ? ? ? //說明放不下有滾動(dòng)條 ? ? ? 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> //中間的時(shí)間發(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左右滾動(dòng)的方法詳解
- vue左右側(cè)聯(lián)動(dòng)滾動(dòng)的實(shí)現(xiàn)代碼
- vue 導(dǎo)航錨點(diǎn)_點(diǎn)擊平滑滾動(dòng),導(dǎo)航欄對應(yīng)變化詳解
- vue tab滾動(dòng)到一定高度,固定在頂部,點(diǎn)擊tab切換不同的內(nèi)容操作
- vue中實(shí)現(xiàn)點(diǎn)擊按鈕滾動(dòng)到頁面對應(yīng)位置的方法(使用c3平滑屬性實(shí)現(xiàn))
- vue+導(dǎo)航錨點(diǎn)聯(lián)動(dòng)-滾動(dòng)監(jiān)聽和點(diǎn)擊平滑滾動(dòng)跳轉(zhuǎn)實(shí)例
- vue監(jiān)聽滾動(dòng)事件實(shí)現(xiàn)滾動(dòng)監(jiān)聽
- Vue.js實(shí)戰(zhàn)之通過監(jiān)聽滾動(dòng)事件實(shí)現(xiàn)動(dòng)態(tài)錨點(diǎn)
- vue實(shí)現(xiàn)消息的無縫滾動(dòng)效果的示例代碼
- vue中使用vue-router切換頁面時(shí)滾動(dòng)條自動(dòng)滾動(dòng)到頂部的方法
相關(guān)文章
Vue?3?使用moment設(shè)置顯示時(shí)間格式的問題及解決方法
在Vue?3中,因?yàn)檫^濾器(filter)已經(jīng)被廢棄,取而代之的是全局方法(global?method),本文給大家介紹Vue?3?使用moment設(shè)置顯示時(shí)間格式的問題及解決方法,感興趣的朋友一起看看吧2023-12-12關(guān)于vue中如何監(jiān)聽數(shù)組變化
這篇文章主要介紹了關(guān)于vue中如何監(jiān)聽數(shù)組變化,對vue感興趣的同學(xué),必須得參考下2021-04-04Vue生命周期中的八個(gè)鉤子函數(shù)相機(jī)
這篇文章主要為大家介紹了Vue生命周期中的八個(gè)鉤子函數(shù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2021-12-12Vue3+Elementplus實(shí)現(xiàn)面包屑功能
這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合Elementplus實(shí)現(xiàn)面包屑功能,文中的示例代碼簡潔易懂,具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下2023-11-11vue+echarts實(shí)現(xiàn)動(dòng)態(tài)繪制圖表及異步加載數(shù)據(jù)的方法
vue寫的后臺(tái)管理,需要將表格數(shù)據(jù)繪制成圖表(折線圖,柱狀圖),圖表數(shù)據(jù)都是通過接口請求回來的。這篇文章主要介紹了vue+echarts 動(dòng)態(tài)繪制圖表及異步加載數(shù)據(jù)的相關(guān)知識(shí),需要的朋友可以參考下2018-10-10在vue-cli搭建的項(xiàng)目中增加后臺(tái)mock接口的方法
這篇文章主要介紹了在vue-cli搭建的項(xiàng)目中增加后臺(tái)mock接口的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04