Vue實(shí)現(xiàn)電梯樣式錨點(diǎn)導(dǎo)航效果流程詳解

更新時(shí)間：2023年05月16日 09:08:07 作者：碼上編程

這篇文章主要介紹了Vue實(shí)現(xiàn)電梯樣式錨點(diǎn)導(dǎo)航效果流程，這種導(dǎo)航效果廣泛應(yīng)用于商城點(diǎn)餐購(gòu)物情景，文中通過(guò)示例代碼介紹的很詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧

1、目標(biāo)效果

最近喝了不少的咖啡、奶茶，有一個(gè)效果我倒是挺好奇怎么實(shí)現(xiàn)的：

（1）點(diǎn)擊左側(cè)分類菜單，右側(cè)滾動(dòng)到該分類區(qū)域

（2）右側(cè)滑動(dòng)屏幕，左側(cè)顯示當(dāng)前所處的分類區(qū)域

這種功能會(huì)出現(xiàn)在商城項(xiàng)目中或者分類數(shù)量較多的項(xiàng)目中，專業(yè)名稱稱電梯導(dǎo)航

目標(biāo)效果：

（1）點(diǎn)擊左側(cè)的分類，右側(cè)滑動(dòng)到指定區(qū)域

（2）滾動(dòng)右側(cè)區(qū)域，左邊分類顯示當(dāng)前所處的分類區(qū)域

2、原理

（1）這要用到原生js關(guān)于偏移量和位置相關(guān)的api，這些api建立在你的布局是定位的基礎(chǔ)上，父親相對(duì)定位，左邊分類和右邊商品都是絕對(duì)定位

（2）左邊分類要與右側(cè)商品模塊數(shù)量一一相等（數(shù)量和位置都要對(duì)應(yīng)相等），否則實(shí)現(xiàn)不了電梯導(dǎo)航效果

（3）點(diǎn)擊左側(cè)分類，右側(cè)跳轉(zhuǎn)到對(duì)應(yīng)模塊；這用到了window.scrollTo(水平方向距離，豎直方向距離)

（4）右側(cè)滑動(dòng)，左側(cè)發(fā)生相應(yīng)的變化，這要用到滾動(dòng)事件，vue中使用滾動(dòng)事件需要再onMounted()生命周期注冊(cè)一下滾動(dòng)事件

onMounted(() => {
    window.addEventListener('scroll', handleScroll);
})

（5）如何判斷滾動(dòng)到什么程度左側(cè)才顯示對(duì)應(yīng)的模塊？

dom.offsetTop：每個(gè)dom元素有該屬性，表示距離頂部窗口的距離
document.documentElement.scrollTop：表示頁(yè)面滾動(dòng)的距離
document.documentElement.scrollTop >=dom.offsetTop：顯示對(duì)應(yīng)的模塊，可以通過(guò)遍歷商品模塊數(shù)組，拿到對(duì)應(yīng)的索引，然后設(shè)置左邊分類對(duì)應(yīng)的dom為激活狀態(tài)

（6）出現(xiàn)一個(gè)問(wèn)題：window.scrollTo()將模塊滾動(dòng)至某一位置與頁(yè)面滾動(dòng)事件發(fā)生了沖突，此時(shí)可以添加一個(gè)互斥變量isLock，等window.scrollTo()滾動(dòng)結(jié)束之后，再放開(kāi)鎖

    // 獲取選中的dom元素
    const typeItemDom = shop.value[val]
    // 開(kāi)鎖
    isLock.value = true
    // 第一個(gè)參數(shù)為水平方向，第二個(gè)參數(shù)為縱軸方向
    window.scrollTo(0, typeItemDom.offsetTop)
    setTimeout(() => {
        //關(guān)鎖
        isLock.value = false
    }, 0)

（7）為什么放開(kāi)鎖要在setTimeout里面？根據(jù)js事件循環(huán)機(jī)制，同步任務(wù)（主線程代碼、new Promise里面的代碼）執(zhí)行速度快于異步任務(wù)（setTimeout、setInterval、ajax、promise.then里面的任務(wù)），這樣才能確保鎖是在window.scrollTo() 執(zhí)行完畢之后才打開(kāi)的

3、源代碼

App.vue

 
<template>
  <div>
    <ClassifyByVue></ClassifyByVue>
  </div>
</template>
<script setup>
// import ClassifyByJs from './components/ClassifyByJS.vue';
import ClassifyByVue from './components/ClassifyByVue.vue';
</script>
<style>
* {
  padding: 0;
  margin: 0;
}
</style>

ClassifyByVue.vue

<template>
    <div class="classify">
        <div class="left">
            <div class="item" :class="{ active: currentIndex == index }" v-for="(item, index) in types"
                @click="changeType(index)">{{ item }}
            </div>
        </div>
        <div class="right" @scroll="handleScroll">
            <div v-for="(item, index) in shops" :key="index" ref="shop">
                <div class="title">{{ item.category }}</div>
                <div class="item" v-for="(i, j) in item.data" :key="j">
                    <div class="photo">
                        <img src="/vite.svg" class="logo" alt="Vite logo" />
                    </div>
                    <div class="info">
                        <div class="name">{{ i.name }}</div>
                        <div class="type">{{ i.type }}</div>
                        <div class="desc">{{ i.desc }}</div>
                        <div class="buy">購(gòu)買</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
let isLock = ref(false)
// 分類
let types = ref([
    '人氣Top',
    '爆款套餐',
    '大師咖啡',
    '小黑杯',
    '中國(guó)茶咖',
    '生椰家族',
    '厚乳拿鐵',
    '絲絨拿鐵',
    '生酪拿鐵',
    '經(jīng)典拿鐵',
])
// 商品
let shops = ref([
    {
        category: '人氣Top',
        data: [
            {
                name: '冰吸生椰拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '生椰拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '摸魚(yú)生椰拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '茉莉花香拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '絲絨拿鐵',
                type: '咖啡',
                desc: '咖啡'
            },
            {
                name: '小甘橘美式',
                type: '咖啡',
                desc: '咖啡'
            },
        ]
    },
    {
        category: '爆款套餐',
        data: [
            {
                name: '2杯套餐',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '3杯套餐',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '4杯套餐',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '5杯套餐',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '不喝咖啡套餐',
                type: '咖啡',
                desc: '咖啡'
            },
            {
                name: '必喝套餐',
                type: '咖啡',
                desc: '咖啡'
            },
        ]
    },
    {
        category: '大師咖啡',
        data: [
            {
                name: '美式',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '加濃美式',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '橙C美式',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '澳瑞白',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '卡布奇諾',
                type: '咖啡',
                desc: '咖啡'
            },
            {
                name: '瑪奇朵',
                type: '咖啡',
                desc: '咖啡'
            },
        ]
    },
    {
        category: '小黑杯',
        data: [
            {
                name: '云南小柑橘',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '廣東小柑橘',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '廣西小柑橘',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '福建小柑橘',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '湖南小柑橘',
                type: '咖啡',
                desc: '咖啡'
            },
            {
                name: '江西小柑橘',
                type: '咖啡',
                desc: '咖啡'
            },
        ]
    },
    {
        category: '中國(guó)茶咖',
        data: [
            {
                name: '碧螺知春拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '茉莉花香拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '菊花香拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '梅花香拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '蘭花香拿鐵',
                type: '咖啡',
                desc: '咖啡'
            },
            {
                name: '玫瑰花香拿鐵',
                type: '咖啡',
                desc: '咖啡'
            },
        ]
    },
    {
        category: '生椰家族',
        data: [
            {
                name: '冰吸生椰拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '生椰拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '摸魚(yú)生椰拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '椰云拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '絲絨拿鐵',
                type: '咖啡',
                desc: '咖啡'
            },
            {
                name: '隕石拿鐵',
                type: '咖啡',
                desc: '咖啡'
            },
        ]
    },
    {
        category: '厚乳拿鐵',
        data: [
            {
                name: '厚乳拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '生椰拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '茉莉花香拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '椰云拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '絲絨拿鐵',
                type: '咖啡',
                desc: '咖啡'
            },
            {
                name: '海鹽拿鐵',
                type: '咖啡',
                desc: '咖啡'
            },
        ]
    },
    {
        category: '絲絨拿鐵',
        data: [
            {
                name: '絲絨拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '生椰絲絨拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '黑糖絲絨拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '椰云絲絨拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '香草絲絨拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }
        ]
    },
    {
        category: '生酪拿鐵',
        data: [
            {
                name: '生酪拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '綠豆拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '紅豆拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '黑豆拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '黃豆拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }
        ]
    },
    {
        category: '經(jīng)典拿鐵',
        data: [
            {
                name: '拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '隕石拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '焦糖拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '生椰拿鐵',
                type: '咖啡',
                desc: '咖啡'
            }, {
                name: '美式',
                type: '咖啡',
                desc: '咖啡'
            }
        ]
    },
])
// 獲取右側(cè)商品的ref實(shí)例
let shop = ref(null)
// 用來(lái)表示當(dāng)前選中處于激活狀態(tài)的分類的索引
let currentIndex = ref(0)
// 切換類型
const changeType = val => {
    currentIndex.value = val
    // 獲取選中的dom元素
    const typeItemDom = shop.value[val]
    // 開(kāi)鎖
    isLock.value = true
    // 第一個(gè)參數(shù)為水平方向，第二個(gè)參數(shù)為縱軸方向
    window.scrollTo(0, typeItemDom.offsetTop)
    setTimeout(() => {
        //關(guān)鎖
        isLock.value = false
    }, 0)
}
// 監(jiān)聽(tīng)頁(yè)面滾動(dòng)
const handleScroll = () => {
    // 鎖關(guān)了滾動(dòng)事件才有效
    if (!isLock.value) {
        types.value.forEach((item, index) => {
            // console.dir(shop.value[index]);
            const shopItemDom = shop.value[index]
            // 每個(gè)模塊距離頂部的距離
            const offsetTop = shopItemDom.offsetTop
            // 頁(yè)面滾動(dòng)的距離
            const scrollTop = document.documentElement.scrollTop
            if (scrollTop >= offsetTop) {
                // 給左邊分類設(shè)置激活的效果
                currentIndex.value = index
            }
        })
    }
}
onMounted(() => {
    window.addEventListener('scroll', handleScroll);
})
onBeforeUnmount(() => {
    window.removeEventListener('scroll', handleScroll);
})
</script>
<style scoped lang="less">
.classify {
    display: flex;
    position: relative;
    .left {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 92px;
        overflow-y: scroll;
        border-right: 1px solid #C1C2C4;
        .item {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 67px;
            height: 29px;
            font-size: 15px;
            font-family: PingFang SC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333333;
        }
        .active {
            color: #00B1FF;
        }
        .item:not(:last-child) {
            margin-bottom: 25px;
        }
    }
    .right {
        flex: 1;
        position: absolute;
        top: 0;
        right: 17px;
        overflow-y: scroll;
        .title {
            font-size: 18px;
            margin-bottom: 5px;
        }
        .item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 17px;
            width: 246px;
            height: 73px;
            .photo {
                width: 58px;
                height: 58px;
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 12px;
                    border: 1px solid gray;
                }
            }
            .info {
                display: flex;
                flex-direction: column;
                position: relative;
                width: 171px;
                height: 73px;
                box-shadow: 0px 1px 0px 0px rgba(221, 221, 221, 1);
                .name {
                    padding-left: 0;
                    font-size: 17px;
                    font-weight: 600;
                    color: #333333;
                }
                .type,
                .desc {
                    font-size: 14px;
                    font-weight: 400;
                    color: #999999;
                }
                .buy {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    right: 0;
                    top: 17px;
                    width: 67px;
                    height: 29px;
                    background: #E7E8EA;
                    border-radius: 21px;
                    font-size: 15px;
                    font-family: PingFang SC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #05AFFA;
                }
            }
        }
    }
}
</style>

到此這篇關(guān)于Vue實(shí)現(xiàn)電梯樣式錨點(diǎn)導(dǎo)航效果流程詳解的文章就介紹到這了,更多相關(guān)Vue電梯錨點(diǎn)導(dǎo)航內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: