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步得时候,需要等页面请求加载完成并且渲染完成后再继续。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/574658.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

织梦直接往数据库写入数据

x: 不是必须的 1: 值为1 0: 值为0转载于:https://www.cnblogs.com/bushe/p/4425298.html

wshttpbinding java_WCF自定义用户账号密码之WCF系结模式wsHttpBinding的Java调用

再回到编辑Web服务属性设定画面﹐刚刚所点击的[使用开发默认值]的复选框如果已经有被勾选了﹐请将勾选取消。然后先离开编辑Web服务属性设定画面。1.7. 加入CallbackHandler 档案这里需要加入一个继承CallbackHandler的档案TrustStoreCallbackHandler.javapublic class TrustSt…

.jardesc文件

第一次导出jar文件的时候可以选择记录配置到一个这样的文件中;下次导出的时候,点这个文件->右键->创建jar(或双击),就可以重新生成jar文件了转载于:https://www.cnblogs.com/erbin/p/4427997.html

java中postMethod_HttpClient结合PostMethod调用接口

解决方法:HttpClient client new HttpClient();PostMethod post new PostMethod("http://192.168.0.189:8500/short");post.addRequestHeader("Content-Type", "application/x-www-form-urlencoded;charsetutf-8");// 在头文件中设…

WPF 颜色转换

从字符串到画刷: var converter new System.Windows.Media.BrushConverter(); var brush (Brush)converter.ConvertFromString("#FFFFFF90"); Fill brush; 转载于:https://www.cnblogs.com/xpvincent/p/4431514.html

android指纹java_Android

Android M指纹的资料太少,经过一段时间阅读原生Android代码,写了以下例子,贡献出来给需要帮助的人。以下内容基于64位的高通CPU,搭载fpc1020芯片,此部分代码在原生android上做了更改,以应付工厂指纹的测试。…

about-ie下模拟input file上传功能失效

Q:IE9下file提交到iframe中,load一直不触发,其他高级浏览器均无此问题 解决方案:不使用js模拟 input click事件,取而代之的是把真实的input设置为要触发元素的大小,进行触发onchange原因分析:低…

java把收集的数据节点_java面试题收集(04)

1、rebbitmq的使用场景有哪些?(1)单发送单接受使用场景:简单的发送与接受,没有特别的处理。(2)单发送多接受使用场景:一个发送端,多个接收端,如分布式的任务发布,要保证消息发送的可靠性&#x…

go java gc_图解Golang的GC垃圾回收算法

虽然Golang的GC自打一开始,就被人所诟病,但是经过这么多年的发展,Golang的GC已经改善了非常多,变得非常优秀了。以下是Golang GC算法的里程碑:v1.1 STWv1.3 Mark STW, Sweep 并行v1.5 三色标记法v1.8 hybrid write bar…

统计学的经典书籍指南 (转载自:http://blog.csdn.net/ysuncn/article/details/1943679)...

一、统计学基础部分 1、《统计学》 David Freedman等著,魏宗舒,施锡铨等译 中国统计出版社 据说是统计思想讲得最好的一本书,读了部分章节,受益很多。整本书几乎没有公式,但是讲到了统计思想的精髓。 2、《Mind on …

Linux Bash Shell j简单入门

BASH 的基本语法 最简单的例子 —— Hello World! 关于输入、输出和错误输出 BASH 中对变量的规定(与 C 语言的异同) BASH 中的基本流程控制语法 函数的使用 2.1 最简单的例子 —— Hello World! 几乎所有的讲解编程的书给读者的第一个例子都是 …

jpa mysql脚本迁移_JPA通过LOAD DATA LOCAL INFILE大批量导入数据到MySQL

连接层代码:import org.hibernate.Session;import org.hibernate.internal.SessionFactoryImpl;import org.springframework.jdbc.support.nativejdbc.C3P0NativeJdbcExtractor;import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.SQLE…

javascript的事件冒泡,阻止事件冒泡和事件委托, 事件委托是事件冒泡的一个应用。...

2018年12月13日更新 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><style>ul li{border: 1px solid yellow;}</style> </head> <body> <p hidden>…

php 序列化 java_PHP--序列化与反序列化详解

PHP--序列化与反序列化详解博客说明文章所涉及的资料来自互联网整理和个人总结&#xff0c;意在于个人学习和经验汇总&#xff0c;如有什么地方侵权&#xff0c;请联系本人删除&#xff0c;谢谢&#xff01;说明所有php里面的值都可以使用函数serialize()来返回一个包含字节流的…

hadoop2.x的变化

HDFS Federation&#xff08;HDFS联邦&#xff09; HDFS有两个主要层&#xff1a; Namespace 由目录、文件和块组成&#xff1b;支持所有命名空间对文件和目录的操作。 Block Storage Service 由Block Management和Storage组成。 Block Management 提供dataNode集群成员关系&am…

python enumeration_python枚举防止无效的属性分配

要使枚举类完全“只读”,只需要使用__setattr__hook防止全部的属性分配。因为元类附加到类之后它是创建的,分配正确的枚举值没有问题。就像伊桑的回答一样,我用的是EnumMeta类作为自定义元类的基础:from enum import EnumMeta, Enumclass FrozenEnumMeta(EnumMeta):"Enum …

java wps linux 安装_ubuntu安装Java开发环境

1. 从sun主页JDK for Linux版本。这里的是jdk-6u6--i586.bin.2. 用root用户登录ubuntu&#xff0c;或是在普通用户下用su命令切换用户。切换到所需的安装目录。类型&#xff1a;cd 例如&#xff0c;要在 /usr/java/ 目录中 安装软件&#xff0c;请键入&#xff1a;cd /usr…

[BZOJ 2594] [Wc2006]水管局长数据加强版 【LCT】

题目链接&#xff1a;BZOJ - 2594 题目分析 这道题如果没有删边的操作&#xff0c;那么就是 NOIP2013 货车运输&#xff0c;求两点之间的一条路径&#xff0c;使得边权最大的边的边权尽量小。 那么&#xff0c;这条路径就是最小生成树上这两点之间的路径。 然而现在有了删边操作…

vs升级c++项目遇到的一些问题

1、error C1189: #error : This file requires _WIN32_WINNT to be #defined at least to 0x0403. Value 0x0501 or higher is recommended. 在工程的stdafx.h中&#xff0c;改为如下配置&#xff1a; #ifndef WINVER #define WINVER 0x0501 #endif #ifndef _WIN32_WINNT #def…

python模糊匹配忽略大小写_在python中忽略大小写的简单方法?

如果搜索多个单词&#xff0c;则创建一个集合是有意义的&#xff1a;print(set(brown_sents).intersection(zip(repeat(most_ambiguous_word),word_class_dict[most_ambiguous_word])))输出{(word2, wordclass2), (word2, wordclass3)}要理解它的作用&#xff0c;请将脚本保存到…