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

心愿能帮到你~