vue3项目(二)---Layout
的列表是完全一致的,但是要发送俩次网络请求,存在浪费。需求:浏览器在上下滚动的过程中,如果距离顶部的滚动距离大于78px,吸顶导航显示,小于78px隐藏。字体图标采用的是阿里的字体图标库,样式文件已经准备好,在 `index.html`文件中引入即可。核心逻辑:根据滚动距离判断当前show类名是否显示,大于78显示,小于78,不显示。和前面一样,先引入静态页面,再在Layout组件中引入。1)准备
·
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组件一样
更多推荐
已为社区贡献1条内容
所有评论(0)