小程序自定义组件锚点定位

项目中，如果有一个需求
1:点击页面A点击单位学院这个个字段，进入主键B选择列表，主键B点击任意部门后将选择的部门更新到页面A渲染
2:部门选择列表需要做成按字母分类，且右侧字母有锚点定位
页面A

主键B

不要说，诶，你怎么不用scroll-view啊，几行代码就搞定了！
呵~要是我没用过我就信了
但是scroll-view滚动的时候，不仅有抖动，还卡帧，然后划太快了，它还会来回自由滚动几百遍，总之就是你用不了
果然没有免费的大饼！（或者是我才疏学浅，没有正确使用scroll-view,但是新开页面，只用scroll-view，滚动的时候还是会存在以上问题，我觉得不是我的问题，就是组件有bug~（理直气壮）

然后只能用原生的滚动
我的想法是
1:滚动用原生overflow-y:scroll,至少保证页面滚动流畅
2:点击右边字母定位的时候需要滚动的距离，包裹层已经滚动的距离+定位锚点距离顶部的距离（可正可负）

//因为是在组件内，所以query的时候要in(this)
wx.createSelectorQuery().in(this).select(eleid).boundingClientRect((res) => {
      let pageoffset=this.data.pageoffset;//当前滚动的dom距离顶部的位置
      let scrolltop =pageoffset+res.top;//res.top是被点击的锚点对应的dom距离顶部的位置
      this.setData({
         pageoffset:scrolltop
       })
      wx.pageScrollTo({//注意这里的pageScrollTo,我这边是用组件的最外层包裹层作为top=0的参照物
         scrollTop: scrolltop,
         duration: 500
      })
    }).exec()

然后你会发现
如果你不滚动页面，只是点击不同的锚点进行切换的时候，它可以正常定位，但是一旦滚动之后，因为没有动态监听包裹层滚动距离，所以一旦你滚动后，就不发正常定位锚点了

这难不倒我，我们监听外层的滚动事件就好了

然后你会发现，小程序居然没有办法监听一个非页面dom的滚动事件！（如果是我才疏学浅没有找到，请往我脸上甩链接！

反正我没找到

然后我就在想，那我不需要实时监听，只需要锚点定位的时候，去取一下包裹层的offsettop就好了

wx.createSelectorQuery().in(this).select('.select-page-list-wrap').boundingClientRect((res) => {
      this.setData({
         pageoffset:-res.top// 注意这里的距离值需要取一下反
       })
    }).exec()
  },

综合来说就是

scrollTo(e) {
    let offsettop=0;
   wx.createSelectorQuery().in(this).select('.select-page-list-wrap').boundingClientRect((res) => {
        offsettop=-res.top
    }).exec()
  },
    const  eleid='#'+e.target.dataset.targetid;
    wx.createSelectorQuery().in(this).select(eleid).boundingClientRect((res) => {
       
      let scrolltop =pageoffset+res.top;
      wx.pageScrollTo({
         scrollTop: scrolltop,
         duration: 500
      })
    }).exec()
  }

希望能帮到你~