微信⼩程序点击滚动到指定位置的实现
公司项⽬要做⼀个类似微信通讯录导航的效果，点击右侧字母页⾯滚动到相应位置。
因为微信⼩程序没有dom概念，所以不能使⽤锚点，也不能直接获取对应字母相对页⾯的偏移位置。此时只能使⽤⼩程序创建对象实例的API获取节点信息：
let query = wx.createSelectorQuery().in(this);
query.lectViewport().scrollOfft()
query.lect("#Nav").boundingClientRect();
query.lect("#FilterNav").boundingClientRect();
query.lect("#"+((letter=='#')?'other':letter)).boundingClientRect();
<(function (res) {
let scrollTop = 0;
if(res[3]){
scrollTop = res[0].scrollTop + res[3].top
}el{
scrollTop = res[0].scrollTop;
}
wx.pageScrollTo({
scrollTop: scrollTop - res[1].height - res[2].height,
duration: 300
});
});
解释⼀下该代码的意思：
1.先创建节点对象，wx.createSelectorQuery()返回⼀个对象实例；
2.选择显⽰区域；
3.调⽤lect⽅法，传⼊节点的id值，可在同⼀节点对象进⾏多次调⽤，最后会返回数组结果（上图中滚动区域距离页⾯顶部是有两个导航栏⾼度的距离的，所以查询了两次导航栏）；
<()回调⽅法中可以获取所查询所有节点的信息，数组第⼀条为页⾯的位置信息（滚动距离），获取到对应字母节点的top 值为节点相对于屏幕顶部的位置
结果：页⾯滚动位置 = 页⾯滚动距离 + 字母节点相对屏幕⾼度距离 - 头部导航条⾼度 - 菜单栏⾼度
wx.pageScrollTo（）调⽤API页⾯滚动
如果是让滚动容器滚动到指定位置，计算位置会有⼀点不同：
var query = wx.createSelectorQuery().in(this);
query.lect("#swiper").boundingClientRect();
query.lect("#"+ letter).fields({ rect:true,scrollOfft:true });
query.lectViewport().scrollOfft()
<((res)=>{
_this.tData({
letterScrolltop: res[1].top - res[0].top
})
});
上图因为是弹出框⾥的内容，所以列表放在scroll-view滚动容器中，和上⾯不⼀样的是滚动位置是：滚动容器距离页⾯顶部距离 - 锚点距离页⾯顶部距离，将计算后的偏移量修改⾄对应scroll-view容器的scroll-top属性就⾏了。
到此这篇关于微信⼩程序点击滚动到指定位置的实现的⽂章就介绍到这了，更多相关⼩程序点击滚动到指定位置内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！
