" />

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實現(xiàn)左右點擊滾動效果

 更新時間:2022年01月21日 13:14:10   作者:~小仙女~  
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)左右點擊滾動效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了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í)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue?3?使用moment設(shè)置顯示時間格式的問題及解決方法

    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ù)組變化

    這篇文章主要介紹了關(guān)于vue中如何監(jiān)聽數(shù)組變化,對vue感興趣的同學(xué),必須得參考下
    2021-04-04
  • Vue生命周期中的八個鉤子函數(shù)相機

    Vue生命周期中的八個鉤子函數(shù)相機

    這篇文章主要為大家介紹了Vue生命周期中的八個鉤子函數(shù),具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-12-12
  • Vue渲染流程步驟詳解

    Vue渲染流程步驟詳解

    在Vue里渲染一塊內(nèi)容,會有四個流程步驟,那么該怎么理解這個流程呢,所以本文就給大家詳細(xì)講解一下Vue 渲染流程,文中有纖細(xì)的代碼示例供大家參考,需要的朋友可以參考下
    2023-07-07
  • Vue3+Elementplus實現(xiàn)面包屑功能

    Vue3+Elementplus實現(xiàn)面包屑功能

    這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合Elementplus實現(xiàn)面包屑功能,文中的示例代碼簡潔易懂,具有一定的借鑒價值,有需要的小伙伴可以參考下
    2023-11-11
  • VueJs中toRef與toRefs函數(shù)對比詳解

    VueJs中toRef與toRefs函數(shù)對比詳解

    這篇文章主要為大家介紹了VueJs中toRef與toRefs函數(shù)對比詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-03-03
  • 極速上手 VUE 3 teleport傳送門組件及使用語法

    極速上手 VUE 3 teleport傳送門組件及使用語法

    teleport 傳送門組件,提供一種簡潔的方式,可以指定它里面的內(nèi)容的父元素,也就是說teleport 中的內(nèi)容允許我們控制在任意的DOM中,使用簡單,對VUE 3 teleport傳送門相關(guān)知識感興趣的朋友一起看看吧
    2021-10-10
  • Vue監(jiān)聽屬性和計算屬性

    Vue監(jiān)聽屬性和計算屬性

    這篇文章主要介紹了Vue監(jiān)聽屬性和計算屬性,基本用法添加watch屬性,值為一個對象。對象的屬性名就是要監(jiān)視的數(shù)據(jù),屬性值為回調(diào)函數(shù),每當(dāng)這個屬性名對應(yīng)的值發(fā)生變化,就會觸發(fā)該回調(diào)函數(shù)執(zhí)行,下面來看詳細(xì)內(nèi)容,需要的朋友也可以參考一下
    2021-12-12
  • vue+echarts實現(xiàn)動態(tài)繪制圖表及異步加載數(shù)據(jù)的方法

    vue+echarts實現(xiàn)動態(tài)繪制圖表及異步加載數(shù)據(jù)的方法

    vue寫的后臺管理,需要將表格數(shù)據(jù)繪制成圖表(折線圖,柱狀圖),圖表數(shù)據(jù)都是通過接口請求回來的。這篇文章主要介紹了vue+echarts 動態(tài)繪制圖表及異步加載數(shù)據(jù)的相關(guān)知識,需要的朋友可以參考下
    2018-10-10
  • 在vue-cli搭建的項目中增加后臺mock接口的方法

    在vue-cli搭建的項目中增加后臺mock接口的方法

    這篇文章主要介紹了在vue-cli搭建的項目中增加后臺mock接口的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04

最新評論