小程序长内容实现锚点效果(非srcoll-view)

小程序实现锚点一般是使用scroll-view，而srcoll-view在实现效果时，需要指定固定的高。

遇到的项目中布局分为两块。顶部是固定，底部是长内容，长内容用srcoll-view动态计算高度赋值后，onPageScroll失效（因为整体布局其实是100%）。

为了onPageScroll不失效，长内容不能定高，但会导致srcoll-view锚点失效。

最终实现方案是不使用srcoll-view来进行锚点定位，而是直接计算目标的滚动距离，点击tab页面滚动到目标位置。
参考：https://blog.csdn.net/love1793912554/article/details/94289856

<block wx:for="{{tabs}}" wx:key="id" wx:for-item="item" wx:for-index="index">
   <view
     class="home-tab-item {{tabActive === index && 'active'}}"
     data-value="{{index}}"
     data-opt="{{item.id}}"
     catch:tap="handleTabClick">
      <view class="text"><text>{{item.label}}</text></view>
   </view>
</block>

<view id="{{tab[0]}}">Basic....</view>
<view id="{{tab[1]}}">Liangdian....</view>
<view id="{{tab[2]}}">Arrounding....</view>
<view id="{{tab[3]}}">NearBy....</view>

onLoad: {
    const { tabs } = this.data;
    // 获取各个锚点滚动位置距离顶部的高度
    tabs.map((itm) => {
      query
        .select("#" + itm.id)
        .boundingClientRect(function (rect) {
          itm.top = rect.top;
        })
        .exec();
    });
},

data: {
  tabActive: 0, // 当前选择的tab下标
  tabs: [
      { label: "Basic", id: "Basic" },
      { label: "Liangdian", id: "Liangdian" },
      { label: "Arrounding", id: "Arrounding" },
      { label: "NearBy", id: "NearBy" },
    ],
},

// 滚动到目标位置, tab高亮
onPageScroll:function(event) {
  const { tabs } = this.data;
  let curScroll = event.scrollTop;
  tabs.map((itm, idx) => {
      if ((idx == 0 && curScroll < tabs[idx + 1].top) || (idx == 3 && curScroll >= tabs[idx].top)) {
        that.setData({
          tabActive: idx,
        });
        return false;
      }
      if (curScroll > tabs[idx].top && curScroll < tabs[idx + 1].top) {
        that.setData({
          tabActive: idx,
        });
      }
    });
},

// tab点击滚动到目标位置
handleTabClick(event){
  const { 
    value,
    opt // 目标位置id选择器
  } = event.currentTarget.dataset;

  this.setData({
     tabActive: value,
  });

  const query = wx.createSelectorQuery();
  query.select("#" + opt).boundingClientRect();
  query.selectViewport().scrollOffset();
  query.exec((res) => {
      if (res[0] && res[1]) {
        // 将页面滚动到目标位置
        wx.pageScrollTo({
          scrollTop: res[0].top + res[1].scrollTop,
          duration: 300,
        });
      }
   });
}