一个人的时候,怎样通关?

一个人的时候,怎样通关?即使再承受不住,实际上到后来大家总是能你走来。

序言

前几天面试时,招聘者规定另附一个检测著作,给了一个网址(coding.qq.com/home/ ,没有错便是这个软件) 要我还原这其中的交互效果,其中包括一块涉及了锚点定位。由于我以前也没干过这种作用,就感觉有意思的,随后也随手记录一下,如果能帮一些同学们,那么就最好不过了~

文章正文

tip: 这一demo用的都是vue3加pinia构建的,感兴趣的同学们,demo源代码放在这里哦[~]

第一步 定ps钢笔

给必须定位部件再加上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源代码在这里! 溜了溜了

adminjs.Cn 工作生活学习必备

声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你

原文地址:一个人的时候,怎样通关?