尘岳two
尘岳two
  • 发布:2015-01-26 17:13
  • 更新:2015-04-01 15:29
  • 阅读:2406

关于popover的问题

分类:MUI

我在plusready里面写了一个页面缩放。

var screenWidth = plus.screen.resolutionWidth;  
                document.body.style.zoom = screenWidth / 320;

然后写了一个popover,复制的mui演示框架的代码

<div id="forward" class="mui-popover mui-popover-action mui-popover-bottom">  
                <ul class="mui-table-view">  
                    <li class="mui-table-view-cell">  
                        <a href="#">回复</a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a href="#">转发</a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a href="#">打印</a>  
                    </li>  
                </ul>  
                <ul class="mui-table-view">  
                    <li class="mui-table-view-cell">  
                        <a href="#forward"><b>取消</b></a>  
                    </li>  
                </ul>  
            </div>

用的js控制

mui('.mui-popover').popover('toggle');

然后,popover弹出菜单点击“取消”,菜单正常消失。下面两个问题:
1、点击菜单上面的空白区域,菜单是消失了,但是我的页面缩放也没有了。
2、点击两个ul之间的空白区域,就是打印和取消之间的空白,整个页面很诡异地整体往上挪了一段距离。菜单再取消显示的时候,下面都会有那个空白区域。

问题二

能看到popover的具体实现代码吗?

2015-01-26 17:13 负责人:无 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

为啥要用zoom呢。页面布局都是流式的就可以了,源码都可以在mui.js里边看到。
否则按你的做法,屏幕旋转,或者到了ipad上,岂不是页面内容变得很大

  • 尘岳two (作者)

    因为用px定的单位没法自适应啊。比如父子页面的top和bottom,比如高宽一样的圆形图。

    2015-01-27 09:28

  • 尘岳two (作者)

    关于适配的问题,我是根据这个问题来的。http://ask.dcloud.net.cn/question/2393

    我看了一下,要不就是做多套界面,和Android一样。要不采取rem,但是感觉和zoom缩放一样呢?都是按比例来缩放。所以最后就采取了zoom的做法。

    2015-01-27 10:03

  • 尘岳two (作者)

    因为如果什么都不做的话,那个高度会出问题的。比如我在iphone5上面定的字页面的top有44px,到了大屏Android手机上,这个距离就不对了,就会遮盖一部分父页面的top内容。

    如果用百分比的话,需要高宽一样的圆形图片怎么办?手机屏幕的长宽比不一样的话,出来的效果也不一样啊。

    2015-01-27 10:06

  • 尘岳two (作者)

    又遇到一个问题,对popover做点击监听,Android有反应,iOS没反应啊。用的

    document.getElementById('reply').addEventListener('tap',function(){

    alert("点击跳转");

    });

    2015-01-27 11:08

huyong1978

huyong1978

请问 popover 的高度为何动态设定无效?

ocument.body.querySelector('.mui-popover').style.height=(i*60)+'px';  

在css样式中设置的才起作用

.mui-popover {  

   height:300px;  
}

为什么会这样呢

DCloud_UNI_FXY

DCloud_UNI_FXY

下个版本修复此问题,目前版本仅能在css设置

该问题目前已经被锁定, 无法添加新回复