本文已参与[新人创作礼]活动，一起开启掘金创作之路
一.吸顶头部交互功能
1.背景
诸如电商网站的首页，其内容会比较多，会有很多屏，为了能让用户在滚动浏览内容的过程中都能够快速的切换到其它模块，
需要导航一直可见，所以需要一个吸顶导航的效果
2.手搓
<template>
<div class="app-header-sticky" :class="{ show: showFlag }">
<div class="container">
</div>
</div>
</template>
<script>
import { onMounted, ref } from 'vue'
export default {
setup () {
const showFlag = ref(false)
onMounted(() => {
window.addEventListener('scroll', () => {
const scrollTop = document.documentElement.scrollTop
showFlag.value = scrollTop >= 78
})
})
return {
showFlag
}
}
}
</script>
3.功能实现
(1)下包
yarn add @vueuse/core@5.3.0
(2)在吸顶导航中使用
调用其中的useWindowScroll监听函数（可对其返回值解构获取距离顶部距离的数值）
优点：无需我们自己监听顶部距离，大大减少了代码量
二.组件数据懒加载
1.背景
组件数据懒加载 （首屏渲染优化）
说明：像电商类的网站，尤其是首页最大的特征，就是内容有好几屏，而如果一上来就加载所有屏的数据，
并渲染所有屏的内容，必然发送很多次无效的请求，应该等所在模块进入到可视区再发请求获取数据。可以减少初次进入页面时发出的请求
2.功能实现
(1)调用useIntersectionObserver监听函数，判断组件是否进入可视区
(2)注意
1. 通过 ref 获得组件实例
2. target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的
dom对象
3. isIntersecting 是否进入可视区域，true是进入 false是移出
4. observerElement 被观察的dom
5. isIntersecting =>判断是否进入到可视区域
6. 这里的stop方法是用于终止函数调用，因为我们距离顶部到达了预设的高,
isIntersecting就会返回true，但是我们再次上滑就会导致isIntersecting转
为false，
(3)封装为公共组件
/* 数据懒加载 */
import { useIntersectionObserver } from "@vueuse/core";
import { ref } from "vue";
export function useObserver(apiFn) {
let target = ref(null);
const { stop } = useIntersectionObserver(
target,
([{ isIntersecting }], observerElement) => {
console.log(isIntersecting, 88);
if (isIntersecting) {
stop(); // 关闭监听
// apiFn && apiFn();
if (apiFn) {
apiFn();
}
}
}
);
return target;
}
(4)使用
`
第一步 引入
import { useObserver } from "@/compositions";
第二步 获取
let target = useObserver( 需要懒加载的请求函数 );
return { target };
第三步 使用
< 子组件名 ref="target" title="..." subTitle="..." />
三. 鼠标移入放大镜交互功能
1.背景
实现商品图片预览放大功能
2.功能实现
（1）公共组件
src\components\ImageView\index.vue
<template>
<div class="goods-image">
<!-- 大图 -->
<div
class="large"
:style="[
{
backgroundImage: `url(${imageList[curIndex]})`,
backgroundPositionX: positionX + 'px',
backgroundPositionY: positionY + 'px',
},
]"
v-show="showFlag"
></div>
<div class="middle" ref="target">
<img :src="imageList[curIndex]" alt="" />
<!-- 蒙层容器 -->
<div
class="layer"
:style="{ left: left + 'px', top: top + 'px' }"
v-show="showFlag"
></div>
</div>
<!-- 小图 -->
<ul class="small">
<li
v-for="(img, i) in imageList"
:key="i"
@mouseenter="mouseEnterFn(i)"
:class="{ active: i === curIndex }"
>
<img :src="img" alt="" />
</li>
</ul>
</div>
</template>
<script>
/**
* 交互思路分析：
* 1. 基于鼠标移入事件 mouseenter
* 2. 鼠标移入哪个就把哪个的下标值记录一下 然后通过下标值去imageList中去取值 把取到的值放到src渲染即可
*/
import { ref, watch } from "vue";
import { useMouseInElement } from "@vueuse/core";
export default {
name: "XtxImageViews",
props: {
imageList: {
type: Array,
default: () => {
return [];
},
},
},
setup() {
// 实现鼠标移入交互
const curIndex = ref(0);
function mouseEnterFn(i) {
curIndex.value = i;
}
// 实现放大镜效果
const target = ref(null);
// 控制是否显示 false代表不显示 (直接使用isOutside 会有闪动bug)
const showFlag = ref(false);
// elementX:相较于我们盒子左侧的距离 refObj
// elementY:相较于盒子顶部的距离 refObj
// isOutSide: 鼠标是否在盒子外部 true代表在外部 refObj
const { elementX, elementY, isOutside } = useMouseInElement(target);
// 实现我们滑块跟随鼠标移动的交互效果
const left = ref(0);
const top = ref(0);
const positionX = ref(0);
const positionY = ref(0);
watch([elementX, elementY, isOutside], () => {
// console.log(isOutside.value, 999);
showFlag.value = !isOutside.value;
// 只有进入到容器中才开始做移动判断
if (isOutside.value) {
return false;
}
// 根据鼠标的坐标变化控制我们滑块的位移 left top值
// 1. 控制滑块最大的可移动范围
if (elementX.value > 300) {
left.value = 200;
}
if (elementX.value < 100) {
left.value = 0;
}
// 2. 横向有效移动范围内的逻辑
if (elementX.value < 300 && elementX.value > 100) {
left.value = elementX.value - 100;
}
if (elementY.value > 300) {
top.value = 200;
}
if (elementY.value < 100) {
top.value = 0;
}
// 2. 横向有效移动范围内的逻辑
if (elementY.value < 300 && elementY.value > 100) {
top.value = elementY.value - 100;
}
// 控制背景大图的移动 (背景图的移动 是跟着 滑块的移动走的)
// 1.鼠标的移动的方向和大图的方向是相反的 (正负)
// 2.鼠标每移动一个像素 大图背景移动俩个像素 (x2)
positionX.value = -left.value * 2;
positionY.value = -top.value * 2;
});
/**
* 1. 换算关系 难点
* 2. 使用工具函数的时候 返回的数据的类型 ref类型 refObj.value
* 3. 在实现一些和样式有关的交互 一定要保证css单位值是有效的
*/
return {
mouseEnterFn,
curIndex,
target,
elementX,
elementY,
left,
top,
positionX,
positionY,
showFlag,
};
},
};
</script>
<style scoped lang="less">
.goods-image {
width: 480px;
height: 400px;
position: relative;
display: flex;
.middle {
width: 400px;
height: 400px;
background: #f5f5f5;
}
.large {
position: absolute;
top: 0;
left: 412px;
width: 400px;
height: 400px;
z-index: 500;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-repeat: no-repeat;
// 背景图:盒子的大小 = 2:1 将来控制背景图的移动来实现放大的效果查看 background-position
background-size: 800px 800px;
background-color: #f8f8f8;
}
.layer {
width: 200px;
height: 200px;
background: rgba(0, 0, 0, 0.2);
// 绝对定位 然后跟随咱们鼠标控制left和top属性就可以让滑块移动起来
left: 0;
top: 0;
position: absolute;
}
.small {
width: 80px;
li {
width: 68px;
height: 68px;
margin-left: 12px;
margin-bottom: 15px;
cursor: pointer;
&:hover,
&.active {
border: 2px solid @xtxColor;
}
}
}
}
</style>
（2）使用组件
传图片数组
<XtxImageViews :image-list="goods.mainPictures" />
（3）效果图
鼠标移入前
鼠标移入后
四.定时器功能
1.背景
使用定时器开启关闭暂停
2.功能实现
（1）封装组件
<template>
<div>
{{ countTime }}
<button @click="start">开始定时器</button>
<button @click="pause">暂停定时器</button>
<button @click="resume">继续定时器</button>
</div>
</template>
<script>
import { useIntervalFn } from "@vueuse/core";
import { ref } from "vue";
export default {
name: "",
setup() {
const useCount = (count) => {
const countTime = ref(0);//注意定时器的值必须是响应式数据
const { pause, resume } = useIntervalFn(() => {
// console.log(123);
if (countTime.value <= 0) {
// 终止定时器
pause();
} else {
countTime.value--;
}
}, 1000);
// 开启
const start = () => {
countTime.value = count;
// 继续
resume();
};
return { start, pause, resume, countTime };
};
const { start, pause, resume, countTime } = useCount(50);
return {
countTime,
start,
pause,
resume,
};
},
};
</script>
<style lang="less" scoped></style>
