uni-app 的 pagescrollto 不支持按文本内容定位，因其底层依赖平台查询 api（如 createselectorquery、queryselector）均不支持文本匹配；需手动遍历 dom 或为文本容器设唯一 id 后通过索引滚动。
uni-app 本身不提供「页面内查找文本并高亮/滚动到匹配位置」的原生 API，pageScrollTo 的 selector 参数只支持 CSS 选择器（如 .item、#id），不能按文本内容定位。真要实现“搜索文字 → 滚动到首次出现处”，得自己遍历 DOM 节点做匹配。
为什么 uni.pageScrollTo({ selector: '...' }) 对文字无效
这个 API 底层依赖平台的节点查询能力（微信小程序用 createSelectorQuery，H5 用 document.querySelector），而它们都不支持类似 :contains("张三") 这种伪类（且该伪类已被废弃）。传入纯文本字符串（如 "张三"）会直接报错或静默失败。
- 错误现象：
uni.pageScrollTo({ selector: "张三" })不触发滚动，控制台无报错但也不生效 - 真实限制：微信小程序基础库 2.27.0+ 仍不支持文本内容查询；App 和 H5 端需自行遍历
innerText或textContent - 兼容性影响：H5 可用
document.querySelectorAll(*)遍历，但小程序必须用createSelectorQuery+boundingClientRect，且只能查有id或class的节点
如何用 createSelectorQuery 定位含指定文字的节点
核心思路：给每个可搜索的文本容器加唯一 id（比如 id="text-item-0"），渲染时同步记录「文字 → id 映射」；搜索时先找匹配文字的索引，再用该索引拼出对应 id，最后查位置滚动。
- 必须在模板中为待搜索的文本块显式设置
id，例如：<view :id="'text-item-' + index">{{ item.text }}</view> - 搜索逻辑不能只靠
indexOf，要区分大小写和全字匹配（避免 “李四” 匹配到 “张三李四” 中的子串），建议用item.text.includes(keyword)或正则/\b${keyword}\b/ - 查到索引后，一定要用
this.$nextTick确保 DOM 已更新，否则createSelectorQuery查不到新节点 - 示例片段：
searchText(keyword) {
if (!keyword.trim()) return;
const index = this.list.findIndex(item => item.text.includes(keyword));
if (index === -1) return;
this.$nextTick(() => {
uni.createSelectorQuery()
.select(`#text-item-${index}`)
.boundingClientRect(res => {
if (res) {
uni.pageScrollTo({ scrollTop: res.top - 100, duration: 300 });
}
})
.exec();
});
}
滚动偏移不准？注意 res.top 是相对于视口顶部的距离
boundingClientRect 返回的 top 是节点上边缘距离当前可视区域顶部的像素值，不是页面顶部。如果页面已有滚动，res.top 会是负数或很小的正数，直接传给 scrollTop 会导致跳转错乱。
- 正确做法：用
uni.getSystemInfoSync().windowHeight或固定导航栏高度，算出相对页面顶部的真实 Y 坐标 - 更稳妥方案：改用
scroll-view+scroll-into-view，把整个列表包在<scroll-view scroll-y></scroll-view>内，然后动态设置:scroll-into-view="targetId" - 性能提醒：频繁调用
createSelectorQuery会影响低端机体验，建议加防抖（setTimeout清除前次查询） - 容易踩的坑：
res.top在某些安卓机上可能返回0（未渲染完成），务必加if (res && res.top > 0)判断
真要全文本搜索高亮，H5 和 App 端可走 DOM 方案
小程序端受限于运行环境无法操作 innerHTML 插入 <mark></mark>，但 H5 和 App（尤其是 App）可用原生 JS 遍历文本节点。关键点在于避开非文本节点和 input/textarea。
- 只处理
Node.TEXT_NODE类型节点，跳过Element和注释节点 - 匹配后用
splitText和insertBefore包裹高亮标签，避免破坏原有结构 - 不要用
innerHTML += ...，会清空事件绑定和 input 输入状态 - 简单示意（仅 H5）：
function highlightText(root, keyword) {
const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
while (walker.nextNode()) {
const node = walker.currentNode;
const text = node.textContent;
if (text.includes(keyword)) {
const parent = node.parentElement;
const splitIndex = text.indexOf(keyword);
const before = node.splitText(splitIndex);
before.splitText(keyword.length);
const mark = document.createElement('mark');
mark.textContent = keyword;
parent.insertBefore(mark, before);
}
}
}
这个逻辑不能直接搬到小程序里——document 对象不存在，createTreeWalker 也不可用。想跨端统一，只能放弃高亮，专注滚动定位。
