收藏
回答

为什么不同的微信账号在同一部手机上half-screen-dialog有的可以滚动,有的不可以滚动?

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug weui框架中的half-screen-dialog组件 微信iOS客户端 8.0.40 2.24.1

苹果和安卓手机都有这样的问题,10个人中有3-4个用户会有这样的情况,而且很奇怪的是,同一个手机使用不同的微信号登录,效果是不一样的,比如:同一个手机,用微信号A登录操作是没有问题的,用微信号B登录操作是有问题的,这个应该如何解决?跟weui的版本有关?

回答关注问题邀请回答
收藏

1 个回答

  • 微盟
    微盟
    2023-08-09

    在微信小程序中,half-screen-dialog(半屏弹窗)的滚动与微信账号无关,而是与具体的页面布局和样式设置有关。

    首先,需要确保半屏弹窗内部内容的高度超过了弹窗的高度,才能触发滚动。如果内容高度不足以填满弹窗,就不会出现滚动条。

    其次,半屏弹窗的滚动效果与页面的滚动穿透问题有关。在小程序中,默认情况下,弹窗弹出时,页面会被禁止滚动,以避免滚动穿透问题。如果你希望在弹窗内部可以滚动,可以通过以下方法解决:

    1. 使用catchtouchmove事件:在半屏弹窗内部的scroll-view组件上加上catchtouchmove事件,阻止事件冒泡到父级元素,从而实现在弹窗内部的滚动。
    html
    
    Copy code
    <scroll-view catchtouchmove></scroll-view>
    
    
    1. 使用wx.createSelectorQuery()获取滚动区域的高度,并设置最小高度:在弹窗弹出时,通过wx.createSelectorQuery()获取到半屏弹窗内部滚动区域的高度,然后设置弹窗内容的最小高度为该高度,以保证内容超过弹窗高度,从而触发滚动。
    javascript
    
    Copy code
    // 弹窗弹出时的处理逻辑
    wx.createSelectorQuery().select('.dialog-content').boundingClientRect(function(rect) {
      const dialogHeight = rect.height; // 弹窗内容的高度
      const windowHeight = wx.getSystemInfoSync().windowHeight; // 窗口高度
      const minHeight = Math.min(dialogHeight, windowHeight); // 设置最小高度为弹窗内容高度和窗口高度的最小值
      that.setData({
        dialogMinHeight: `${minHeight}px`
      });
    }).exec();
    
    html
    
    Copy code
    <view class="dialog-content" style="min-height: {{dialogMinHeight}}"></view>
    
    

    通过以上方法,可以在半屏弹窗内部实现滚动效果。如果仍然无法滚动,可能是由于具体的页面布局、样式设置或其他代码逻辑问题。建议仔细检查代码,确保相关元素的高度和滚动设置正确无误。


    2023-08-09
    有用
    回复 2
    • mei
      mei
      2023-08-09
      试了,不行
      2023-08-09
      回复
    • mei
      mei
      2023-08-09
      是否还有其它解决方案
      2023-08-09
      回复
登录 后发表内容