收藏
回答

scroll-view下fixed布局在真机ios下显示问题

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug 在scroll-view内部使用时fixed属性失效问题(ios系统) 客户端 7.0.3 2.4.2

- 在scroll-view组件下的view使用fixed布局,设置css如下:

  position:fixed;

  top:0;

  bottom:0;

  left:0;

  right:0;

  width:100%;

  height:100%;
  z-index:99999;

  background:rgba(0,0,0,0.5);


- 预期表现:
阴影层覆盖整个手机屏幕,置于最高层级。

bug:但是现在阴影层只有当前组件区域的大小,而非手机屏幕大小。

(只有ios真机存在问题)


最后一次编辑于  02-15  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

2 个回答

  • 铭锋科技
    铭锋科技
    02-15


    微软大牛来了啊,测试是没问题的,

    wxml:

    <view class='cover'></view>

    <view class='intro'>内容</view>


    wxss:

    .intro {

    margin: 30px;

    text-align: center;

    }


    .cover {

    position: fixed;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    width: 100%;

    height: 100%;

    z-index: 99999;

    background: rgba(0, 0, 0, 0.5);

    }


    关键看你的代码


    02-15
    赞同
    回复 3
    • 十
      02-15

      现在是这样需要在组件里面使用这个,意思是这个弹窗是一个组件A,然后这个组件A被引入另一个组件B。然后组件B被引入index.wxml.组件A的fixed就会失效。

      02-15
      回复
    • 铭锋科技
      铭锋科技
      02-15回复

      排除业务逻辑,调试器里的wxml就有完整的wxml代码及相关的样式,这里其实就是提供复现的代码

      02-15
      回复
    • 十
      02-15回复铭锋科技

      排查了一下,应该是楼上说的那个外部引起的失效问题。scroll-view里失效的

      02-15
      回复
  • lcl123456
    lcl123456
    02-15

    有可能是组件的外部元素带有 transform:traslate3d 等使fixed 定位失效的属性,导致 fixed 定位不再相对与视口。搜一下 fixed 定位失效,排查一下

    02-15
    赞同
    回复 1
    • 十
      02-15

      嗯嗯,是因为在scroll-view里引起的失效

      02-15
      回复