前言
最近公司的项目转向使用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(); });}
欢迎访问 ,初来实习,多请帮助~