popover中ul无法滚动问题

分类：MUI

popover

项目中使用popover,在popover中有ul，ul通过height固定了高度，如果ul中的li超出了高度则上拉滚动，我给ul设置了overflow-y,但是在android手机上不能实现ul上拉，怎么回事？该如何修改

2016-04-07 09:35 负责人:无分享

4 个回复

马脸老男人 - Bazinga！

你检查一下你页面底部的<script>里是否有“mui('.mui-scroll-wrapper').scroll();”这一行代码。

seniafamily (作者)

在scroll滚动到最后一个li的时候由于动画，总会把最后一个li给隐藏起来，该如何修改使最后一个li的内容显示出来

马脸老男人 - Bazinga！

我的不会，代码给你。
主页面：

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title>弹出菜单－主页面</title>  
        <link href="css/mui.min.css" rel="stylesheet" />  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" href="#topPopover"></a>  
            <h1 class="mui-title">popover（弹出菜单）</h1>  
        </header>  

        <script src="js/mui.min.js"></script>  
        <script type="text/javascript" charset="UTF-8">  
            mui.init({  
                subpages: [{  
                    url: 'popover-subpage.html',  
                    id: 'popover-subpage.html',  
                    styles: {  
                        top: '45px',  
                        bottom: '0px',  
                        bounce: 'vertical'  
                    }  
                }]  
            });  
            //跨页面里主页面的点击事件  
            document.getElementById("menu").addEventListener('tap', function(e) {  
                //获得子页面  
                var detailPage = plus.webview.getWebviewById('popover-subpage.html');  
                //触发子页面弹出窗口事件  
                mui.fire(detailPage, 'topPopover');  
            });  
        </script>  
    </body>  

</html>

马脸老男人 - Bazinga！

子页面：

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title>弹出菜单－子页面</title>  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <style>  
            /*跨webview需要手动指定位置*/  
            .mui-plus header.mui-bar {  
                display: none!important;  
            }  
            .mui-plus .mui-bar-nav~.mui-content {  
                padding: 0!important;  
            }  

            .mui-plus .plus{  
                display: inline;  
            }  

            .plus{  
                display: none;  
            }  

            #topPopover {  
                position: fixed;  
                top: 16px;  
                right: 6px;  
            }  
            #topPopover .mui-popover-arrow {  
                left: auto;  
                right: 6px;  
            }  
            p {  
                text-indent: 22px;  
            }  
            span.mui-icon {  
                font-size: 14px;  
                color: #007aff;  
                margin-left: -15px;  
                padding-right: 10px;  
            }  
            .mui-popover {  
                height: 300px;  
            }  
            .mui-content {  
                padding: 10px;  
            }  
        </style>  
    </head>  

    <body>  
        <!--右上角弹出菜单-->  
        <div id="topPopover" class="mui-popover">  
            <div class="mui-popover-arrow"></div>  
            <div class="mui-scroll-wrapper">  
                <div class="mui-scroll">  
                    <ul class="mui-table-view">  
                        <li class="mui-table-view-cell"><a href="#">Item1</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item2</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item3</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item4</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item5</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item6</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item7</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item8</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item9</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item10</a>  
                        </li>  
                    </ul>  
                </div>  
            </div>  

        <script src="js/mui.min.js"></script>  
        <script type="text/javascript" charset="UTF-8">  
            mui.init();  
            mui('.mui-scroll-wrapper').scroll();  
            //添加自定义事件监听  
            window.addEventListener('topPopover',function(event){  
                //获得事件参数  
                var id = event.detail.id;  
                //传入toggle参数，用户也无需关心当前是显示还是隐藏状态，mui会自动识别处理；  
                mui('.mui-popover').popover('toggle');  
            });  
        </script>  
    </body>  

</html>

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

popover中ul无法滚动问题

4 个回复

公告

相关问题

popover中ul无法滚动问题

与内容相关的链接

4 个回复

公告

相关问题