一个人的时候,怎样通关?即使再承受不住,实际上到后来大家总是能你走来。
序言
前几天面试时,招聘者规定另附一个检测著作,给了一个网址(coding.qq.com/home/ ,没有错便是这个软件) 要我还原这其中的交互效果,其中包括一块涉及了锚点定位。由于我以前也没干过这种作用,就感觉有意思的,随后也随手记录一下,如果能帮一些同学们,那么就最好不过了~
文章正文
tip: 这一demo用的都是vue3加pinia构建的,感兴趣的同学们,demo源代码放在这里哦[~]
第一步 定ps钢笔
tip: 这一demo用的都是vue3加pinia构建的,感兴趣的同学们,demo源代码放在这里哦[~]
给必须定位部件再加上id,后边搜索原素需要使用哦(敲重点)
<template>
<div class="main-container w" id="main">
<!-- 状态栏 -->
<Notice />
<!-- 大型赛事会员专区 -->
<Activity />
<!-- 程序编写好帮手 -->
<CodingTool id="labs" />
<!-- 趣味性课程内容,优秀教师名人带你学 -->
<Interesting id="courses" />
<!-- 精彩纷呈著作,融会贯通 -->
<Production id="project" />
<!-- 扣叮动态性 -->
<News id="codingnews" />
<!-- 校园风采 -->
<School id="cocase" />
<!-- 合作方 -->
<Partner id="cooperator" />
</div>
</template>
第二步 根据导航条让ps钢笔运动起来!
实际上这一步,是先根据导航条的js点击事件和ps钢笔开展连动,导航条其实就是下面的东西
这一步的关键要素有如下2个
1. 先使用element.scrollTo方式(使页面翻转到给出元素特定经纬坐标)界定一个锚点定位翻转方式
为了能让页面翻转到给出原素(其实就是ps钢笔)的特定经纬坐标,接下来我们运用了这一srollTo用这种方法,如何使用呢,我在mdn截屏出来了,可以参考一下参照,操作方法非常简易
我编码里使用的options的参数方式,详细编码如下所示: 用这种方法里需要注意的问题点:
parent提的是锚点定位原素可翻转父级原素,在这里我还拿着外层,id为app元素,大伙儿可以根据实际情况取不一样可翻转父级原素
scrollTo(offsetTop) {
const parent = document.querySelector('#app')
parent.scrollTo({
top: offsetTop,
behavior: 'smooth'
})
}
2. 获得ps钢笔的offsetTop(间距父级元素顶端间距)
上边己经界定好啦锚点定位的翻转方式,只需向里边传到一个主要参数(ps钢笔间距父元素的顶部距离offsetTop)就能快乐地翻转啦。
获得ps钢笔的offsetTop非常简单,应用document.querySelector取得相匹配ps钢笔元素,再取在其中offsetTop的基础属性就行啦,编码如下所示:
anchorPosition(anchor) {
const element = document.querySelector(anchor)
this.scrollTo(element.offsetTop)
}
那样导航条跟ps钢笔点一下联动的基本工具就搞定,这一步是否非常简易
接着就是稍微繁杂一丢丢的一步啦~
第三步 ps钢笔翻转时,导航条也需要跟随动哦,来而不往非礼也~
这一步,我思路是这样子的滴:
1. 在网页页面初始化后(onMounted),先取得全部ps钢笔的offsetTop,由小到大放到一个二维数组offsetTopList里便捷后边应用;
2. 监视可翻转父元素的scroll事情,撰写sroll的处理方式srollHandle;
3. 由小到大反方向遍历数组offsetTopList,用翻转时获得的offsetTop值与赋值过的值作比较,只需高于或等于赋值过的值,就结束赋值,这就是我找到的较为省力的方式(假如得到更好的方式热烈欢迎各位大佬评论留言指点一下,我悄悄学习一下);
4. 完毕赋值的时候注意要纪录当年的ps钢笔哦,那样导航条才能够按照这个ps钢笔设定相对应的高亮度项。;
详细编码如下所示:
const scrollHandle = ({ target }) => {
const curScrollTop = target.scrollTop
let flag = true
const len = offsetTopList.length
for (let i = len - 1; i >= 0; i--) {
const curReference = offsetTopList[i].offsetTop // 现阶段标准值
if (flag && curScrollTop >= curReference - 10) {
flag = false
sidebarStore.setAnchor(offsetTopList[i].anchor)
}
}
}
总结
到这儿,所以关于锚点定位的关键因素就已经完成,在其中待改善的点是翻转时处理办法要加下节流阀解决,要不然还挺耗费特性的。没干过又感兴趣的朋友可以试试哦~
文中关键词
1. scrollTo
2. offsetTop
demo源代码在这里! 溜了溜了
声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你
原文地址:一个人的时候,怎样通关?