1. Layout静态模板结构的搭建

 步骤:

1)创建LayoutNav、LayoutHeader、LayoutFooter三个组件

 在组件里导入静态页面。

2)在Layout组件中引入

//src/views/Layout
<script setup>
import LayoutNav from './components/LayoutNav.vue'
import LayoutHeader from './components/LayoutHeader.vue'
import LayoutFooter from './components/LayoutFooter.vue'
</script>

<template>
  <LayoutNav />
  <LayoutHeader />
  <RouterView />
  <LayoutFooter />
 
</template>

2.字体图标渲染

字体图标采用的是阿里的字体图标库,样式文件已经准备好,在 `index.html`文件中引入即可。

3. 一级导航的渲染

步骤
1) 根据接口文档封装接口函数
先在apis下创建layout.js文件
//src/apis/layout.js
import httpInstance from '@/utils/http'
export function getCategoryAPI(){
    // 因为是get 请求,所以可以省略不写method:get
    return httpInstance({url:'/home/category/head'})
}
2) 发送请求获取数据列表
//src/views/Layout/index.vue
<script setup>
  import { getCategoryAPI } from '@/apis/layout'
  import { onMounted, ref } from 'vue'

  const categoryList = ref([])
  const getCategory = async () => {
    const res = await getCategoryAPI()
    categoryList.value = res.result
  }

  onMounted(() => getCategory())

</script>

3) v-for渲染页面

4. 吸顶导航交互实现

需求:浏览器在上下滚动的过程中,如果距离顶部的滚动距离大于78px,吸顶导航显示,小于78px隐藏。
步骤:
1)准备吸顶导航组件(LayoutFixed)

 和前面一样,先引入静态页面,再在Layout组件中引入。

2)获取滚动的距离(使用VueUse插件)

先安装:npm i @vueuse/core

//src/views/Layout/components/LayoutFixed.vue

<script setup>
// vueUse
import { useScroll } from '@vueuse/core'
const { y } = useScroll(window)
</script>

3)实现吸顶交互

核心逻辑:根据滚动距离判断当前show类名是否显示,大于78显示,小于78,不显示

//src/views/Layout/components/LayoutFixed.vue

<template>
  <div class="app-header-sticky" :class="{ show: y > 78 }">
    <!-- 省略部分代码 -->
  </div>
</template>

5. Pinia优化重复请求

因为吸顶导航和LayoutHeader区域的列表是完全一致的,但是要发送俩次网络请求,存在浪费。通过Pinia集中管理数据,再把数据给组件使用。

 步骤:

1)在store下创建category.js文件

//src/stores/category.js

import {ref} from 'vue'
import {defineStore} from 'pinia'
import { getCategoryAPI } from '@/apis/layout'
export const useCategoryStore=defineStore('category',()=>{
    // 导航列表的数据管理
    // state导航列表数据
    const categoryList=ref([])

    // action获取导航数据的方法
    const getCategory=async()=>{
        const res=await getCategoryAPI()
        categoryList.value=res.result
    }

    return {
        categoryList,
        getCategory
    }
})

2)首先在layoutFixed组件中使用pinia

//src/views/Layout/components/LayoutFixed.vue
<script setup>
import { useCategoryStore } from '@/stores/category';
// 使用pinia中的数据
const categoryStore=useCategoryStore()
</script>

注意:记得更改categoryList的来源。

 LayoutHeader组件一样

Logo

前往低代码交流专区

更多推荐