解决Mui中popover 顶部弹出菜单弹出位置不准确以及无法收回的问题

wanglu1209 发布于2019-08-20 12:06 / 825人阅读

摘要：前言最近公司的项目转向使用开发移动端项目，其中想要通过在顶部标题栏加入弹出菜单的方式，来定位长列表的位置，如图所示。由于我的页面比较长，因而出现不在顶部使用弹出菜单时，弹出菜单位置像是不正确的情况，如图所示。

前言

最近公司的项目转向使用Hbuilder开发移动端项目，其中想要通过在顶部标题栏加入弹出菜单的方式，来定位长列表的位置，如图所示。

问题

Mui的功能貌似还不是很完善，在使用这个弹出菜单的时候，发现了一些很尴尬的问题：

目录的跳转我是通过锚点实现的，但是在跳转之前，这个菜单一切正常，一旦触发跳转，那么整个菜单就会卡住无法收回，但是跳转功能正常。

由于我的页面比较长，因而出现不在顶部使用弹出菜单时，弹出菜单位置像是不正确的情况，如图所示。

解决办法 1.问题一的解决方案

对于问题一，我的解决方案是手动关闭弹出菜单，这里通过控制台查找出生成的mask的class .mui-backdrop以及弹出菜单项的class .mui-table-view-cell代码如下：

//点击mask的触发事件
$(".mui-backdrop").click(function() {
    $("#topPopover").hide();
    $(".mui-backdrop").hide();
});
//点击菜单项的触发事件
$(".mui-table-view-cell").click(function() {
    $("#topPopover").hide();
    $(".mui-backdrop").hide();
});

虽然方法比较粗暴，但是可以解决这个问题，有更好的解决方案的希望能够指正。

2.问题二的解决方案

对于问题二，我的解决方案是，将它定死~。 我通过使用js写入css样式，将其设为`absolute`即可解决。代码如下：

    var uip = document.getElementById("topPopover"); //topPopover是popover 的最外层div
    uip.style.position = "absolute";

代码

主页面代码如下所示：

解决以上两个问题的代码：

function setPopOverMenu() {
    var uip = document.getElementById("topPopover");
    uip.style.position = "absolute";
    $(".mui-backdrop").click(function() {
        $("#topPopover").hide();
        $(".mui-backdrop").hide();
    });
    $(".mui-table-view-cell").click(function() {
        $("#topPopover").hide();
        $(".mui-backdrop").hide();
    });
}

欢迎访问zhkmxx930的博客 ,初来实习，多请帮助~

云服务器 GPU云服务器弹出位置弹出菜单弹出选择菜单弹出式菜单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80791.html

MUI使用总结

摘要：预加载自定义事件第三方扩展插件涉及的，除了，其它所有手机浏览器及浏览器均无法使用，目前主要包括语音输入事件相关注意浏览器没有事件事件相关的，手机端浏览器均可使用端模拟手机浏览器也可以正常使用。最近项目中需要使用MUI做一个视频播放的小功能。我就花时间研究了一下MUI。 MUI是一个使用JavaScript开发Android和IOS应用的前端框架。这篇文章将以知识树的形式对MUI的使用...

elliott_hu 2019-08-23 14:48 评论0 收藏0
漫谈 React 组件库开发（一）：多层嵌套弹层组件

摘要：引言组件中有很多弹出式组件，常见的如，以及等。这样一种层次结构在实践中大大降低了各类弹层组件的实现和维护成本。但是的组件实现了一个大多数组件库都没有实现的功能弹层的嵌套处理。引言 UI 组件中有很多弹出式组件，常见的如 Dialog，Tooltip 以及 Select 等。这些组件都有一个特点，它们的弹出层通常不是渲染在当前的 DOM 树中，而是直接插入在 body （或者其它类似的...

warmcheng 2019-08-21 16:21 评论0 收藏0
(2016-11-04完美解决)移动端iOS第三方输入法遮挡底部input及android键盘回落后

摘要：问题概述问题移动端输入框键盘唤起后定位好的元素跟随页面滚动了起来属性失效了满屏任性横飞如下图问题有第三方输入法的机还会出现键盘弹出延迟，导致普通布局输入框等位置靠下的被键盘挡住如下图这个完成出来然后键盘再顶起完美解决方案在输入框获取焦点问题概述问题1：H5 web 移动端输入框, 键盘唤起后fixed定位好的元素跟随页面滚动了起来… fixed属性失效了！满屏任性横飞, 如下图:...

Simon 2019-08-21 14:15 评论0 收藏0