因为微信小程序没有dom概念,所以不能使用锚点,也不能直接获取对应字母相对页面的偏移位置。此时只能使用小程序创建对象实例的API获取节点信息:
btnMore() {
var me = this;
//创建节点查询器 query,.in(this),this传入的是自定义组件的实例,否则获取到的rect值为null
var query = wx.createSelectorQuery().in(me);
//获取页面滚动位置请求
query.selectViewport().scrollOffset();
//选择Id=describe
query.select("#describe").boundingClientRect();
query.exec(function (res) {
// console.log()
// res[0]//是page
// res[1]//是#describe
var miss = res[0].scrollTop + res[1].top - 80;
wx.pageScrollTo({
scrollTop: miss,
duration: 300
});
});
}
1.创建节点查询器 query,.in(this),this传入的是自定义组件的实例,否则获取到的rect值为null
2.调用select方法,传入节点的id值,可在同一节点对象进行多次调用,最后会返回数组结果(上图中滚动区域距离页面顶部是有两个导航栏高度的距离的,所以查询了两次导航栏);
-
exec()回调方法中可以获取所查询所有节点的信息,数组第一条为页面的位置信息(滚动距离),获取到对应字母节点的top值为节点相对于屏幕顶部的位置
-
使用微信小程序自带的滚动方法:wx.pageScrollTo