乐趣区

关于前端:小程序自定义组件锚点定位

jiezi

我的项目中，如果有一个需要
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()}

心愿能帮到你~

退出移动版