小程序根据标签id滚动至对应标签处
解决小程序无法利用锚点跳转的缺陷
wxml:
// 控制区
<view catchtap="scroolTo" data-id="top">回顶部</view>
<view catchtap="scroolTo" data-id="bottom">去底部</view>
// 目标位置
<view id="top"></view>
<view id="bottom"></view>
js:
scroolTo: function (e) {
let page = this
let id = e.currentTarget.dataset.id
let scroolObj = wx.createSelectorQuery().in(page)
scroolObj.selectViewport().scrollOffset()
scroolObj.select("#" + id).boundingClientRect()
scroolObj.exec(function (res) {
console.log(res);
let scrollTop = res[0].scrollTop + res[1].top - 30; //这里-30可忽略,项目需要
wx.pageScrollTo({
scrollTop,
duration: 100
});
});
},