钉钉小程序弹窗滑动,底部页面跟着滑动

钉钉小程序中,页面过长,可滑动。点击弹出弹窗,弹窗中内容可滑动。此时,底部页面会跟着上层弹窗的滑动而滑动。

如果使弹窗内容滑动时,页面内容不动,解决办法:

当弹窗出现时,设置底部页面的总标签为固定定位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',
  },
});

即可解决小程序中弹窗滑动,底部页面跟着滑动这一问题。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值