钉钉小程序中,页面过长,可滑动。点击弹出弹窗,弹窗中内容可滑动。此时,底部页面会跟着上层弹窗的滑动而滑动。
如果使弹窗内容滑动时,页面内容不动,解决办法:
当弹窗出现时,设置底部页面的总标签为固定定位fixed,固定定位的top、left值即为弹窗出现时总标签的top、left:
// 页面总标签
<view id="wrapBox" class="wrap" style="{{ styleWrap }}">
...
</view>
// 弹窗出现时,将页面总标签设置为固定定位,底部页面就不会随着弹窗滑动而滑动了
const scroolObj = dd.createSelectorQuery().select('#wrapBox'); // wrapBox是总标签的id
scroolObj.boundingClientRect().exec(rect => {
this.setData({
styleWrap: { // styleWrap这一变量是添加到总标签中的
position: 'fixed',
top: rect[0].top,
left: rect[0].left,
}
})
})
弹窗关闭时,重新将页面总标签设置为静态定位static,同时将页面滚动到弹窗出现之前的位置(注意:如果只是将总标签设置为静态定位,而不滚动页面,则页面将会回到顶部):
const { styleWrap } = this.data;
my.pageScrollTo({
scrollTop: -styleWrap.top,
});
this.setData({
styleWrap: {
position: 'static',
},
});
即可解决小程序中弹窗滑动,底部页面跟着滑动这一问题。