博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
解决Mui中popover 顶部弹出菜单弹出位置不准确以及无法收回的问题
阅读量:5752 次
发布时间:2019-06-18

本文共 1673 字,大约阅读时间需要 5 分钟。

前言

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

图片描述

问题

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

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

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

    图片描述

解决办法

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";

代码

主页面代码如下所示:

xxx

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

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();    });}

欢迎访问 ,初来实习,多请帮助~

转载地址:http://xdukx.baihongyu.com/

你可能感兴趣的文章
hiveserver2修改线程数
查看>>
XML教程
查看>>
oracle体系结构
查看>>
Microsoft Exchange Server 2010与Office 365混合部署升级到Exchange Server 2016混合部署汇总...
查看>>
Proxy服务器配置_Squid
查看>>
开启“无线网络”,提示:请启动windows零配置wzc服务
查看>>
【SDN】Openflow协议中对LLDP算法的理解--如何判断非OF区域的存在
查看>>
纯DIV+CSS简单实现Tab选项卡左右切换效果
查看>>
栈(一)
查看>>
ios 自定义delegate(一)
查看>>
创建美国地区的appleId
查看>>
例题10-2 UVa12169 Disgruntled Judge(拓展欧几里德)
查看>>
JS 原生ajax写法
查看>>
Composer管理PHP依赖关系
查看>>
React.js学习笔记之JSX解读
查看>>
我所了解的Libevent和SEDA架构
查看>>
Socket编程问题小记
查看>>
基于Flask-Angular的项目组网架构与部署
查看>>
一张图道尽程序员的出路
查看>>
redis 常用命令
查看>>