<!DOCTYPE html>
<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">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
header.mui-bar {
display: none;
}
.mui-bar-nav~.mui-content {
padding: 0;
}
p {
text-indent: 22px;
}
span.mui-icon {
font-size: 14px;
color: #007aff;
margin-left: -15px;
padding-right: 10px;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Popovers with action sheet</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item" href="#delete">
<span class="mui-icon mui-icon-trash"></span>
</a>
<a class="mui-tab-item" href="#">
</a>
<a class="mui-tab-item" href="#">
</a>
<a class="mui-tab-item" href="#forward">
<span class="mui-icon mui-icon-undo"></span>
</a>
</nav>
<div class="mui-content">
<div class="mui-content-padded" style="line-height: 60px !important;">
<p>Actionsheet一般从底部弹出，显示一系列可选择的操作按钮，供用户选择； ActionSheet可从任意位置触发， 点击本页面左下角
<span class="mui-icon mui-icon-trash"></span>会弹出删除信息确认框； 点击本页面右下角
<span class="mui-icon mui-icon-undo"></span>会弹出转发确认框； 你也可点击如下按钮，打开照片选择框： Actionsheet一般从底部弹出，显示一系列可选择的操作按钮，供用户选择； ActionSheet可从任意位置触发，
<a href="#picture" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开Actionsheet</a> 点击本页面左下角
<span class="mui-icon mui-icon-trash"></span>会弹出删除信息确认框； 点击本页面右下角
<span class="mui-icon mui-icon-undo"></span>会弹出转发确认框； 你也可点击如下按钮，打开照片选择框： Actionsheet一般从底部弹出，显示一系列可选择的操作按钮，供用户选择； ActionSheet可从任意位置触发， 点击本页面左下角
<span class="mui-icon mui-icon-trash"></span>会弹出删除信息确认框； 点击本页面右下角
<span class="mui-icon mui-icon-undo"></span>会弹出转发确认框； 你也可点击如下按钮，打开照片选择框：
</p>
<p>
</p>
</div>
</div>
<div id="delete" class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#" style="color: #FF3B30;">删除信息</a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#delete"><b>取消</b></a>
</li>
</ul>
</div>
<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>
<div id="picture" 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>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#picture"><b>取消</b></a>
</li>
</ul>
</div>
</body>
</html>
10 个回复
DCloud_UNI_FXY
在popover内部使用我们的scroll控件
蛋炒饭 (作者)
我发现手指触摸在popover和webview之间还是可以整块移动
DCloud_UNI_FXY
你使用的mui版本是多少？
蛋炒饭 (作者)
Mui v0.9.0
DCloud_UNI_FXY
我这里测试不会有滚动的问题，0.9.0版本应该没这个问题。
你把这个页面代码发出来我测试一下
黑不溜秋
看下面的样例，mui，V0.9.0里面的安卓机，重现楼主popover和遮罩层下面div一起滚动的问题。
2014-12-23 15:08
黑不溜秋
actionsheet.html页面
2014-12-23 15:10
黑不溜秋
<!DOCTYPE html>
<html>
</html>
蛋炒饭 (作者)
我将最新demo的popovers.html的内容增加到能出现滚动条去测，也是会出现同样的问题，要刚好触摸在弹出层与webview之间滚动才会
蛋炒饭 (作者)
如图，会滚动到被遮住
DCloud_UNI_FXY
嗯。发现该问题了。你指的是触摸滚动的时候，正在处在popover的顶部一小块区域或底部一小块区域吧。该问题已修复，下个版本更新后就可以了
蛋炒饭 (作者)
好的 3q