目录
1.吸顶效果
手写实现
思路：利用原生js的API和css的固定定位样式实现吸顶
核心步骤：?
01.获取滚动条滚动距离
document.documentElement.scrollTop02. 事件监听
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
// 组件销毁，清理定时器
onUnmounted(() => { clearInterval(timer)})