小闹
小闹
  • 发布:2014-12-30 16:17
  • 更新:2014-12-30 17:35
  • 阅读:2290

你好,我想请问一个关于fullscreen的问题

分类:MUI

我使用.mui-fullscreen .mui-slider-item > a {top: 50%;transform: translateY(-50%);来显示图片,但是图片的位置不是垂直居中,感觉是图片顶部在50%的地方,而不是中心位置,这是为什么呢?而且使用使用了fullscreen,页面放大后,图片的左右都会丢失一部分,无法挪动。

2014-12-30 16:17 负责人:无 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

你是要实现什么功能?

弹出一个全屏显示的居中图片,可以双指放大,缩小?

代码发出来我看看

  • 小闹 (作者)

    全屏显示的居中图片,双指放大缩小,真机是IPHONE5

    2014-12-30 16:46

小闹

小闹 (作者)

在前一个页面
var win = plus.webview.create("show-img.html","show-img.html",{scalable:true});
win.show("zoom-fade-out",300);

show-img.html代码:

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1" />  

        <title></title>  

        <!-- CSS -->  
        <link href="css/mui.min.css" rel="stylesheet"/>  
        <style>  
            html,  
            body {  
                background-color: #000;  
            }  
        </style>      

        <!-- JS -->  
        <script src="js/mui.min.js"></script>  
    </head>  

    <body>  
        <div class="mui-content" id="back">  
            <div class="mui-slider mui-fullscreen">  
                <div class="mui-slider-group">  
                    <div class="mui-slider-item">  
                        <a href="#">  
                            <img src="images/cbd.jpg" />  
                        </a>  
                    </div>  
                    <div class="mui-slider-item">  
                        <a href="#">  
                            <img src="images/shuijiao.jpg" />  
                        </a>  
                    </div>  
                    <div class="mui-slider-item">  
                        <a href="#">  
                            <img src="images/yuantiao.jpg" />  
                        </a>  
                    </div>  
                    <div class="mui-slider-item">  
                        <a href="#">  
                            <img src="images/muwu.jpg" />  
                        </a>  
                    </div>  
                </div>  
            </div>  
        </div>  

        <script>  
            mui.init({  
                swipeBack: false,  
            });  

            document.getElementById('back').addEventListener('tap', function() {  
                mui.currentWebview.close();  
            });  
        </script>  
    </body>  
</html>
DCloud_UNI_FXY

DCloud_UNI_FXY

已经排查到原因了,下个版本会修复。

目前你可以自己手动定义一下css

.mui-fullscreen .mui-slider-item > a {  
top: 50%;  
transform: translateY(-50%);  
-webkit-transform: translateY(-50%);  
}
  • 小闹 (作者)

    哦,没有定义webkit下的trans啊,谢谢,看半天都觉得是对的

    2014-12-30 17:12

小闹

小闹 (作者)

我觉得现在多张图片包括在slide和fullscreen里后,使用双指放大和缩小不是很灵敏,我试过,如果只是在页面显示图片,灵敏度要高很多,希望在下个版本能够解决这个问题

DCloud_UNI_FXY

DCloud_UNI_FXY

后续会优化mui内部的gesture事件,你说的不是很灵敏,可能是因为在slider中,需要处理拖拽事件,当你多指放大,缩小时,可能触发了拖拽事件

小闹

小闹 (作者)

我看现在的手势事件中都是单指操作,没有对双指事件有判断,希望后续能够强化更多对常用手势,这样误判的可能性就会小很多,希望你们越做越好

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