<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../../css/mui.min.css">
<!--App自定义的css-->
<!--<link rel="stylesheet" type="text/css" href="../css/app.css" />-->
<style>
.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 {
/* width: 100%; */
height: 300px;
}
.mui-content {
padding: 10px;
}
</style>
</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>
<div class="mui-content">
<div class="mui-content-padded">
<p>popover（弹出菜单）是mobile App中常见的UI组件，在用户点击位置附近弹出悬浮菜单，向用户展示更多信息或提供快捷操作。</p>
<p>popover最常用的两个位置：顶部导航栏右侧和底部工具栏右侧； 点击本页右上角的
<span class="mui-icon mui-icon-bars"></span> 图标体验，
<!--TODO 后续增加原生标题示例-->
<!--<span class="plus">这是一个<strong>原生标题栏</strong>触发的popover示例，
<span class="mui-icon mui-icon-bars"></span>在父webview中，点击后通过自定义事件 通知子webview， 子webview再执行popover的显示隐藏逻辑； </span>-->
接着点击本页面右下角的“菜单”按钮体验。
</p>
<p>除了页面顶部导航栏、底部工具栏固定位置之外，其它区域要使用弹出菜单，都要准确计算物理位置，从而实现弹出菜单的绝对定位； mui封装的手势事件中，可以获得点击位置，通过这些位置可实现任意区域的弹出菜单显示，点击如下按钮体验：
</p>
<p style="text-indent: 0;">
<a href="#middlePopover" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开弹出菜单</a>
</p>
</div>
</div>
<!--右上角弹出菜单-->
<div id="topPopover" class="mui-popover" style="overflow: scroll;" >
<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>
<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="#">Item11</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item12</a>
</li>
</ul>
</div>
</div>
</div>
<!--右下角弹出菜单-->
<script src="../../js/mui.min.js"></script>
<script>
mui.init({
pullRefresh: { //配置下/上 拉刷新
container: '.mui-content-padded',
up: {
height:50,//可选.默认50.触发上拉加载拖动距离
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
mui.plusReady(function() {
mui('.mui-scroll-wrapper').scroll();
mui('body').on('shown', '.mui-popover', function(e) {
mui('.mui-content-padded').pullRefresh().disablePullupToRefresh();
console.log('shown', e.detail.id);//detail为当前popover元素
});
mui('body').on('hidden', '.mui-popover', function(e) {
mui('.mui-content-padded').pullRefresh().enablePullupToRefresh();
console.log('hidden', e.detail.id);//detail为当前popover元素
});
});
/**
* 上拉加载拉取历史列表
*/
function pullupRefresh() {
alert("下拉")
mui('.mui-content-padded').pullRefresh().endPullupToRefresh();
}
</script>
</body>
</html>
1***@163.com
- 发布：2018-10-17 17:04
- 更新：2018-10-17 17:04
- 阅读：1883
当页面加了上拉后,popover的item太多超出div高度就无法显示
分类：MUI
0 个回复