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