【记录62】网站输入框搜索内容页面定位

首先肯定页面有一个输入框，绑定一个方法handleChange()

核心部分
const element = document.getElementById(selectQuery); // 根据 id 标识 获取dom
element.scrollIntoView({ behavior: "smooth", block: "start" }); // 平滑滚动到内容位置
document.body.scrollIntoView(true); // 未查找到，返回顶部
参数说明：
scrollIntoView() 方法支持多种参数配置来自定义滚动行为，主要包括滚动动画效果、垂直和水平对齐方式等
behavior 参数控制滚动动画效果。auto立即跳转目标元素，没有动画过度效果；smooth平滑滚动到元素，具有动画效果
block 参数定义垂直方向对其方式。start 元素顶部与视口顶部对齐；center 元素中心与视口中心对齐；end 元素底部与视口底部对齐；nearest 滚动到最接近视口的位置
inline 参数定义水平方向对齐方式。start 元素顶部与视口顶部对齐；center 元素中心与视口中心对齐；end 元素底部与视口底部对齐；nearest 滚动到最接近视口的位置
注意：smooth在IOS设备存在兼容性问题
如果有人想设置滚动速度快慢，抱歉没有

要想用该方法，先考虑是否动态根据数据生成，就可以使用，如果是定制（静止），不建议，非要加也是可以的，就是需要手动的去添加它的唯一标识，维护起来挺麻烦的

注意：html和JavaScript中的sys-${index}-${i}，实则位置是根据这个定位内容

<div v-for="(ele, index) in navarList" :key="index + 'b'" class="parentnav"><div class="cards"><div class="cardtitle">{{ ele.label }}</div><div style="text-align: center"><div v-for="(ite, i) in ele.children" :key="i + 'child'" class="cardbox"><divclass="childcard":id="`sys-${index}-${i}`"@click="toSystemClick(ite)"v-throttle><img :src="ite.src" alt="" style="" /><div class="childtext">{{ ite.label }}</div></div></div></div></div></div>

handleChange() {if (this.searchValue) {// 空，不触发方法const array = this.navarList;// 递归函数，const recursionFunc = function name(filter, array, query = "sys") {// 递归取class类if (array.length && filter) {for (let S = 0; S < array.length; S++) {const element = array[S];if (element.label.includes(filter)) return `${query}-${S}`;if ("children" in element && element.children.length) {const result = recursionFunc(filter, element.children, `${query}-${S}`);// 重点，这里查询符合条件的内容并标识，唯一性if (result) return result;}}}return null;};// 这里为啥子要用递归函数，因为我也不确定后期这个数据是嵌套多少层，通过递归函数无所谓嵌多少层了const selectQuery = recursionFunc(this.searchValue, array, "sys");if (selectQuery === "sys" || !selectQuery) {//	标识为sys或空，返回页面顶部document.body.scrollIntoView(true);return;}this.$nextTick(() => {// 重新加载内容位置// const element = document.querySelector(selectQuery);const element = document.getElementById(selectQuery);if (element) {// 定位内容所在位置// 方法一// window.scrollTo({//   top: element.offsetTop,//   behavior: "smooth",// });// 方法二element.scrollIntoView({ behavior: "smooth", block: "start" });  //// block: "start/center/end/nearest默认值根据最短滚动距离原则决定是否滚动"‌：定义垂直方向的对齐方式，这里表示元素的顶部与视窗（或可滚动容器）的顶部对齐// behavior: "smooth/auto默认，无平滑动画/instant无动画，直接跳转"‌：指定滚动行为为平滑滚动过渡，而不是瞬间跳转，这能提供更好的用户体验// element.focus();}});} else {// 返回顶部document.body.scrollIntoView(true);}},