createSelectorQuery获取元素距离顶部高度，在滚动时，top值波动问题

[hebeillc]

相关平台

微信小程序

小程序基础库: 3.5.8
使用框架: React

复现步骤

在商品区与评论区交界处滚动，发现选项卡出现切换波动

期望结果

期望实现tab跟随页面滚动被选中，滚动到评论区时，评论项被选中，滚动到商品区时，商品项被选中

实际结果

滚动时，在商品区与评论区交界处出现tab来回选中切换的情况，debug后发现是元素的top值在滚动时不是递增递减，会出现大小波动的情况，在缓慢滚动时比较明显

环境信息

Taro CLI 4.0.5 environment info:
System:
OS: macOS 13.5
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.9.0 - ~/.nvm/versions/node/v22.9.0/bin/node
Yarn: 1.22.22 - ~/.nvm/versions/node/v22.9.0/bin/yarn
npm: 10.8.3 - ~/.nvm/versions/node/v22.9.0/bin/npm
npmPackages:
@tarojs/cli: 4.0.5 => 4.0.5
@tarojs/components: 4.0.5 => 4.0.5
@tarojs/helper: 4.0.5 => 4.0.5
@tarojs/plugin-framework-react: 4.0.5 => 4.0.5
@tarojs/plugin-html: 4.0.5 => 4.0.5
@tarojs/plugin-platform-alipay: 4.0.5 => 4.0.5
@tarojs/plugin-platform-h5: 4.0.5 => 4.0.5
@tarojs/plugin-platform-jd: 4.0.5 => 4.0.5
@tarojs/plugin-platform-qq: 4.0.5 => 4.0.5
@tarojs/plugin-platform-swan: 4.0.5 => 4.0.5
@tarojs/plugin-platform-tt: 4.0.5 => 4.0.5
@tarojs/plugin-platform-weapp: 4.0.5 => 4.0.5
@tarojs/react: 4.0.5 => 4.0.5
@tarojs/runtime: 4.0.5 => 4.0.5
@tarojs/shared: 4.0.5 => 4.0.5
@tarojs/taro: 4.0.5 => 4.0.5
@tarojs/taro-loader: 4.0.5 => 4.0.5
@tarojs/webpack5-runner: 4.0.5 => 4.0.5
babel-preset-taro: 4.0.5 => 4.0.5
eslint-config-taro: 4.0.5 => 4.0.5
react: ^18.0.0 => 18.3.1

---

补充信息

不清楚是不是使用 Nutui的问题，在这里也提问了
jdf2e/nutui-react#2608

[hebeillc]

[hebeillc]

import Taro, { useRouter } from "@tarojs/taro";
import React, { useEffect, useState } from "react";
import {ScrollView, Text, View } from "@tarojs/components";

export default function DetailPage() {
  const [tabIndex, setTabIndex] = useState(0);
  const [tabtops, setTabtops] = useState({});

  const getSystemInfo = () => {
    const menubuttoninfo = Taro.getMenuButtonBoundingClientRect();
    const systeminfo = Taro.getSystemInfoSync();

    let statusBarHeight = systeminfo.statusBarHeight; // 获取状态栏高度
    let menuBottonHeight = menubuttoninfo.height; //获取胶囊顶部高度
    let menuBottonWidth = menubuttoninfo.width; //获取胶囊顶部高度
    let menuBottonTop = menubuttoninfo.top; // 获取胶囊距离顶部的高度
    let navBarHeight =
      statusBarHeight +
      menuBottonHeight +
      (menuBottonTop - statusBarHeight) * 2; //计算nav导航栏的高度（上图蓝色线段的长度）
    let windowHeight = systeminfo.screenHeight - navBarHeight;

    return {
      menuBottonWidth: menuBottonWidth,
      navBarHeight: navBarHeight,
      windowHeight: windowHeight,
      statusBarHeight: statusBarHeight,
      menuBottonTop: menuBottonTop,
    };
  };

  const { windowHeight, navBarHeight, menuBottonHeight } = getSystemInfo();

  const pinglunClientInfo = Taro.createSelectorQuery()
    .select("#pinglun")
    .boundingClientRect((info) => {
      setTabtops({ ...tabtops, ...{ pinglun: info.top } });
    });
  const xiangqingClientInfo = Taro.createSelectorQuery()
    .select("#xiangqing")
    .boundingClientRect((info) => {
      setTabtops({ ...tabtops, ...{ xiangqing: info.top } });
    });
  const onScroll = (e) => {
    console.log("scrollTop", e.detail.scrollTop);
    xiangqingClientInfo.exec();
    pinglunClientInfo.exec();
  };
  useEffect(() => {
    if (tabtops.xiangqing && tabtops.xiangqing <= 96) {
      console.log("详情选中", tabtops);
      setTabIndex(2);
    } else if (tabtops.pinglun && tabtops.pinglun <= 96) {
      console.log("评论选中", tabtops);
      setTabIndex(1);
    } else {
      console.log("商品选中", tabtops);
      setTabIndex(0);
    }
  }, [tabtops]);

  return (
    <>
      <View className="w-screen h-screen">
        <ScrollView
          scrollY
          enhanced={true}
          fastDeceleration={true}
          scrollWithAnimation
          style={{ height: windowHeight }}
          onScroll={onScroll}
        >
          <View
            className="w-screen h-24 bg-white fixed top-0 left-0 box-border"
            style={{ paddingTop: navBarHeight }}
          >
            <View className="w-screen h-full flex flex-row justify-between items-center">
              {tabIndex == 0 ? (
                <View className="flex-1 text-center text-red-400">商品</View>
              ) : (
                <View className="flex-1 text-center">商品</View>
              )}
              {tabIndex == 1 ? (
                <View className="flex-1 text-center text-red-400">评价</View>
              ) : (
                <View className="flex-1 text-center">评价</View>
              )}
              {tabIndex == 2 ? (
                <View className="flex-1 text-center text-red-400">详情</View>
              ) : (
                <View className="flex-1 text-center">详情</View>
              )}
            </View>
          </View>

          <View id="shangpin" className='w-screen h-96 bg-red-300 pl-4 pr-4 pt-2 flex flex-col justify-start box-border'>
          </View>
          {/* 评论详情区 */}
          <View id="pinglun" className="w-screen h-96 bg-blue-400">
            <View></View>
          </View>
          <View id="xiangqing" className="w-screen h-96 bg-yellow-400"></View>
        </ScrollView>
      </View>
    </>
  );
}

[vini123]

虚幻之物对应着冥冥之路！：《羽》