200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > vue页面锚文本_Vue如何实现锚点定位功能?

vue页面锚文本_Vue如何实现锚点定位功能?

时间:2024-01-27 15:57:29

相关推荐

vue页面锚文本_Vue如何实现锚点定位功能?

整个链路应该是这样的,用户在消息中心中看到回复自己的信息,点进去后会跳到视频播放页面,页面url中会带上此次消息的replyId(就简称rid吧),然后接下来的问题就是有两个,一个是评论本身是分页的,你的评论不一定在这个视频的第一页,所以要先跳到你评论的页码页面,然后在定位到评论本身。

Chrome,F12可以看到某个视频的播放页整体的网络情况,如下图某个视频播放页的所有发出去的ajax请求(上面筛选XHR即可筛出ajax请求)

可以看到发出去的请求非常多,如果筛出我们需要的东西呢?

很明显,因为http本身是无状态的,它不会知道你上一步做了什么东西,除非你有专门去记录。所以不同页面间去通信,必须依靠一定的媒介,这里就是用的url参数。

上面的链接最后有一个rid,我们把这个rid在network中搜索一下可以发现:

很快,我们就找到了,一个这样的请求:

在这个请求的response中,可以看到,它给出了这个rid对应的评论在第几页:

接下来异步就是前端跳转到第四页,跳转完后接下来呢?

同样的,打开Chrome,F12,Element,可以看到整体的Dom结构,在评论列表里我们可以看到这样的结构

我们大胆猜测,这个data-id就是rid,然后实验了下发现确实是,所以整个流程就简单了。

1.用户点击评论,携带rid跳到视频播放页

2.根据rid获取到当前评论在第N页

3.document.querySelector找到data-id为rid的dom,并且获取它的offsetTop

4.document.documentElement.scrollTop(offsetTop)

这样就完事了, 但是里面有值得注意的点是,请求是异步的,所以从第2步跳到第3步得时候,需要等页面请求加载完成并且渲染完成后再继续。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。