【记录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">
                  <div
                    class="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);
      }
    },