1.吸顶效果
手写实现
思路：利用原生js的API和css的固定定位样式实现吸顶
核心步骤：
01.获取滚动条滚动距离
document.documentElement.scrollTop
02. 事件监听
window.addEventListener('scroll', update)
03.先写一个类名使用固定定位及在钩子函数里监听和销毁
04简单的代码实现：
<template> <nav><div :class="{show:y>78}">测试吸顶效果</div></nav> </template> <script> import { onMounted, onUnmounted, ref } from 'vue' export default { setup () { // 定义一个响应式数据 const y = ref(0) const update = () => { y.value = document.documentElement.scrollTop console.log(y.value) // Y 获取滚动距离 } //钩子函数（dom）页面加载时监听滚动距离 onMounted(() => { window.addEventListener('scroll', update) }) //钩子函数销毁定时器 onUnmounted(() => { window.removeEventListener('scroll', update) }) return { y } } } </script> <style scoped> nav{ height: 3000px; } div{ display: none; height: 50px; border: orange; background-color: skyblue; text-align: center; font-size: 20px; } .aaa{ display: block; height: 300px; background-color: skyblue; } </style>
2.组装数据
业务场景:
利用v-for渲染的时候，有时候数据并不是只有一个数组，有可能是嵌套的，需要我们组装数据，如下图所示：
思路：写好我们想要的结构，然后一一赋值
注意点：1.map返回新数组list
2.起名（如id和name要和后台的数据对应）
3.拿到数据后v-for渲染，用然后children里面的数据 可以v-for item（父数据的每一项）
3.轮播图
业务场景：vue3手写轮播图
思路：
1.制作静态结构
2.传入图片之后渲染（通过ajax获取）
3.逻辑功能实现（渲染后的是静态的第一张图片）,需要实现自动轮播、鼠标进去离开暂停开启效果 ，清理定时器
因为轮播图以后可能要用，所以注册全局组件（导入，在install里定义）
引入轮播图组件，几个小按钮
总体来言，还算简单，放出各功能核心代码：
自动轮播实现：利用v-for的下标和自己定义的变量相等时为true，控制样式（图片的显示隐藏）
let timer = null + const autoPlayFn = () => { + clearInterval(timer) + timer = setInterval(() => { + index.value++ + if (index.value >= props.sliders.length) { + index.value = 0 + } + }, props.duration) + } + watch(() => props.sliders, (newVal) => { + // 有数据&开启自动播放，才调用自动播放函数 + if (newVal.length && props.autoPlay) { + index.value = 0 + autoPlayFn() + } + }, { immediate: true }) +
鼠标进入离开暂停 ：利用鼠标进入时间@mouseenter事件和@mouseleave事件控制定时器（清除）
clearInterval(定时器ID)
销毁定时器：如果不销毁一直监听，容易出bug
1. // 组件销毁，清理定时器 2. onUnmounted(() => { clearInterval(timer)})
