微信小程序实现点击滑动到对应位置
实际效果
滑动演示效果
.wxml
<view id='move1'></view>
.js
moveTarget: function (e) {
const that = this;
let scrollTop = 0;
const query = wx.createSelectorQuery();
query.selectViewport().scrollOffset();
query.exec(function (res) {
scrollTop = res[0].scrollTop;
});
query.select('#move1').boundingClientRect(res => {
wx.pageScrollTo({
scrollTop: scrollTop + res.top,
duration: 0
})
}).exec();
}
.js(和上面是同一个,下面的包含注释)
moveTarget: function (e) {
const that = this;
//scrollTop 当前页面到顶部的距离
let scrollTop = 0;
//wx.createSelectorQuery() 返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中,应使用 this.createSelectorQuery() 来代替。
const query = wx.createSelectorQuery();
//query.selectViewport() 选择显示区域。可用于获取显示区域的尺寸、滚动位置等信息。
//query.selectViewport().scrollOffset() 添加节点的滚动位置查询请求。以像素为单位。节点必须是 scroll-view 或者 viewport,返回 NodesRef 对应的 SelectorQuery。
query.selectViewport().scrollOffset();
//query.exec() 执行所有的请求。请求结果按请求次序构成数组,在 callback 的第一个参数中返回。
query.exec(function (res) {
scrollTop = res[0].scrollTop; //res[0].scrollTop距顶部的距离
})
//query.select()在当前页面下选择第一个匹配选择器 selector 的节点。返回一个 NodesRef 对象实例,可以用于获取节点信息。
//query.select('#move1').boundingClientRect
//query.select('#move1').boundingClientRect() 添加节点的布局位置的查询请求。相对于显示区域,以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery。
query.select('#move1').boundingClientRect(res => {
console.log("距顶部的距离:",scrollTop ," move1距当前页面的距离:",res.top);
//wx.pageScrollTo() 将页面滚动到目标位置
//scrollTop:滚动到页面的目标位置,单位 px
//duration:滚动动画的时长,单位 ms
wx.pageScrollTo({
scrollTop: scrollTop + res.top,
duration: 0
})
}).exec();
}