解决mui-popover 弹出菜单不能滚动的一次实践

在移动端的开发过程中，经常会遇见一些弹窗展示信息或操作的功能模块，而弹出菜单就是最常见的一种了。基于其他框架的弹窗模块当然也有很多，如果你有更好的，欢迎分享。这里我们就讲讲基于mui的菜单弹窗。（传送门： mui菜单弹窗）。

mui > mui-popover文档如下。

按照文档，引入代码块，运行后，发现很多问题，预想的弹窗功能好像未能实现。

我们可以先看看成功的案例。通过Hello MUI来看吧。在Hello MUI项目里 找到popovers.html。不会创建Hello Mui 项目的，详见上篇文章popovers.html 。

运行项目得到该功能的实现如下。标注的三处弹窗功能均实现。我们就依此来实现我们自己的弹窗菜单。来看看在实现的过程中需要注意的问题，以及出现问题的解决方法。

在我们自己的页面，如果引入popovers.html 的代码块，需要注意的有以下三点。

第一，必须给类 .mui-popover 设置高度。不设置高度，弹窗无法正常展开。设置高度按自己需求来设置，即

.mui-popover {
				height: 300px;
			}

 第二，mui-popovers初始化，即

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

这里，我们的弹窗已经可以实现了。

第三，代码块建议直接引入popovers.html的弹窗代码块，不建议引入mui文档内的代码块，即

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

注意，ID需要和你a标签的锚点（href）一一对应，a标签锚点样式如下：

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

此时我们自己的弹窗已经可以正常响应了。此时在控制台可能会报错：Unable to preventDefault inside passive event listener due to target being treated as passive，意思就是无法在被动事件监听器中阻止default，因为目标被视为被动  。此时我们需要在css样式中添加全局样式

*{
      touch-action: none;     //禁止触发默认的手势操作
  }

这样，报错就可以解决了。

到此，我们mui-popover菜单弹窗就可以实现了。关于Unable to preventDefault inside passive event listener due to target being treated as passive 的报错，Dcloud 问答社区，好多小伙伴在问，讲是自己的弹窗无法滚动，主要应该就是自己的mui-popover没有设置高度，类似于div局部滚动，需要给div设置指定的高度的道理类似。

最后，这里主要是自己在实现mui-popover菜单弹窗时遇到的问题，及解决办法的分享。如果对小伙伴有帮助，动动你的小手点波赞，在此万分感谢。