MUI popover的应用及如何使其弹出的页面内容超出可滚动-Monkey前端博客

popover（弹出菜单）是mobile App中常见的UI组件，在用户点击位置附近弹出悬浮菜单，向用户展示更多信息或提供快捷操作。官方封装了两个大家常用的两个位置：顶部导航栏右侧和底部工具栏右侧，请看mui-popoverdemo。

顶部导航栏右侧弹出

<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>
</div>

要显示、隐藏如上菜单，mui推荐使用锚点方式：

<a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" href="#topPopover"></a>

点击如上定义的按钮，即可显示弹出菜单，再次点击弹出菜单之外的其他区域，均可关闭弹出菜单；这种使用方式最为简洁。

底部工具栏右侧弹出

<div id="bottomPopover" class="mui-popover mui-popover-bottom">
	<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>
</div>

要显示、隐藏如上菜单，mui推荐使用锚点方式：

<a href="#bottomPopover" class="mui-btn mui-btn-link mui-pull-right">菜单</a>

任意位置点击弹出

<div id="middlePopover" 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>
</div>

要显示、隐藏如上菜单，mui推荐使用锚点方式：

<a href="#middlePopover" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开弹出菜单</a>

以上均是官方有提供的demo，若希望通过js的方式控制弹出菜单，则通过如下一个方法即可：

mui('.bottomPopover').popover(status[,anchor]);

status

'show'：显示popover

'hide'：隐藏popover

'toggle'：自动识别处理显示隐藏状态

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

[anchor]

anchorElement：锚点元素

//传入toggle参数，用户也无需关心当前是显示还是隐藏状态，mui会自动识别处理；
mui('.mui-popover').popover('toggle',document.getElementById("openPopover"));

但是往往需求都是千遍万化的，题目是说如果弹出的页面内容超出了，我想要使其滚动显示怎么弄呢？这个在官网真心没有给出说明，需要我们自己去查看，这边就给大家说说如何实现该效果：

弹出的页面内容超出显示滚动条

只需在script中添加mui自带的scroll方法即可使用，所以这需要大家再看框架的时候一定要熟能生巧，灵活使用，具体代码如下，就一行就可以实现：

mui('.mui-scroll-wrapper').scroll();

上面这个代码里面的标签元素是在你页面内容外部的元素名称。

弹出的页面内容超出显示滚动条demo。