layer-mobile 在ios手机上弹框不能显示的问题

项目测试的时候layer-mobile的open方法
app.$layer.open({
                  title: app.$t('layer.tishi'),
                  content:r.msg,           
                  btn:[app.$t('layer.btn')]
                })
在ios下没反应,测试一上午终于发现问题所在:

  
     
   

在.child-view  class下我把这行代码注释了,注释的原因是下拉刷新会出问题。只能先加上这个css了
/*当你触摸并按住触摸目标时候,禁止或显示系统默认菜单。 */
    touch-action: none;

 

更新:

晚上测试发现加上这行css后安卓机页面不能滚动了,但是ios是可以滚动的......

唉,只能再注释,然后用css判断是ios机型再加上了

//iphone4 判断ios的代码网上很多,这里就不复制粘贴了
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){
    .child-view{
        /*禁止默认的滚动,当你触摸并按住触摸目标时候,禁止或显示系统默认菜单。 */
        touch-action: none;
    }

......

2019-09-17更新:

去年的项目今年重新做,换了套模板又出现了这个问题。不过这次不是不显示,应该是超出视觉范围了。因为要点两下才能点击其他页面。究其原因是css的影响

vue项目出现弹框整体html布局如下:

layer-mobile 在ios手机上弹框不能显示的问题_第1张图片

child-view主要样式为 position: absolute;元素占满整个屏幕

layui-m-layer源码样式为 position: relative;

android不影响,ios真机调试就是这两个定位的影响导致layer弹框显示在屏幕外了,把layui-m-layer的样式调整为position: absolute!important;同时android不影响,发现可行。

你可能感兴趣的:(Vue2.0)