有这样一个需求：点击不同的几种类型卡片跳转到一个h5页面 领导觉着体验感不是很好 想要：点击A卡片跳转到页面并定位到页面的A模块 以此类推
网页内容是通过循环组件生成的 没有模块的title class没有区分 例如都是.title 那么，我们怎么通过接受不同的参数来判断是某一个模块呢？
都有相同的class名 所以用下标区分
滚动定位到指定元素位置
function getQueryString(name: string) {
var url = window.location.href;
let params = url.substr(url.lastIndexOf("?") + 1).split("&"); //截取url参数
for (let i = 0; i < params.length; i++) {
let param = params[i];
let key = param.split("=")[0];
let value = param.split("=")[1];
if (key === name) { //返回需要的参数值
return value;
}
}
}
// 进入页面是跳转到顶部
onMounted(() => { //如果获取的元素有v-if等条件显示 可能因为渲染时间问题 获取不到 so在onMounted里面并加上nexttick
nextTick(() => {
let idx = Number(getQueryString("part")); //模块下标
if (idx || idx === 0) {
document.querySelectorAll(".public-text-subhead")[idx] && document.querySelectorAll(".public-text-subhead")[idx].scrollIntoView(); //滚动定位到参数下标模块的位置
} else { //如果没传参数保持默认值 滚动在顶部
// chrome
document.body.scrollTop = 0;
// firefox
document.documentElement.scrollTop = 0;
// safari
window.pageYOffset = 0;
}
});
});
