資訊專欄INFORMATION COLUMN
摘要：前言最近公司的項目轉(zhuǎn)向使用開發(fā)移動端項目，其中想要通過在頂部標題欄加入彈出菜單的方式，來定位長列表的位置，如圖所示。由于我的頁面比較長，因而出現(xiàn)不在頂部使用彈出菜單時，彈出菜單位置像是不正確的情況，如圖所示。
前言
最近公司的項目轉(zhuǎn)向使用Hbuilder開發(fā)移動端項目，其中想要通過在頂部標題欄加入彈出菜單的方式，來定位長列表的位置，如圖所示。
Mui的功能貌似還不是很完善，在使用這個彈出菜單的時候，發(fā)現(xiàn)了一些很尷尬的問題：
目錄的跳轉(zhuǎn)我是通過錨點實現(xiàn)的，但是在跳轉(zhuǎn)之前，這個菜單一切正常，一旦觸發(fā)跳轉(zhuǎn)，那么整個菜單就會卡住無法收回，但是跳轉(zhuǎn)功能正常。
由于我的頁面比較長，因而出現(xiàn)不在頂部使用彈出菜單時，彈出菜單位置像是不正確的情況，如圖所示。
對于問題一，我的解決方案是手動關(guān)閉彈出菜單，這里通過控制臺查找出生成的mask的class .mui-backdrop以及彈出菜單項的class .mui-table-view-cell代碼如下：
//點擊mask的觸發(fā)事件
$(".mui-backdrop").click(function() {
$("#topPopover").hide();
$(".mui-backdrop").hide();
});
//點擊菜單項的觸發(fā)事件
$(".mui-table-view-cell").click(function() {
$("#topPopover").hide();
$(".mui-backdrop").hide();
});
雖然方法比較粗暴，但是可以解決這個問題，有更好的解決方案的希望能夠指正。2.問題二的解決方案
對于問題二，我的解決方案是，將它定死~。 我通過使用js寫入css樣式，將其設(shè)為`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的博客 ,初來實習，多請幫助~
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/80791.html
摘要：預(yù)加載自定義事件第三方擴展插件涉及的，除了，其它所有手機瀏覽器及瀏覽器均無法使用，目前主要包括語音輸入事件相關(guān)注意瀏覽器沒有事件事件相關(guān)的，手機端瀏覽器均可使用端模擬手機瀏覽器也可以正常使用。 最近項目中需要使用MUI做一個視頻播放的小功能。我就花時間研究了一下MUI。 MUI是一個使用JavaScript開發(fā)Android和IOS應(yīng)用的前端框架。這篇文章將以知識樹的形式對MUI的使用...
摘要：引言組件中有很多彈出式組件，常見的如，以及等。這樣一種層次結(jié)構(gòu)在實踐中大大降低了各類彈層組件的實現(xiàn)和維護成本。但是的組件實現(xiàn)了一個大多數(shù)組件庫都沒有實現(xiàn)的功能彈層的嵌套處理。 引言 UI 組件中有很多彈出式組件，常見的如 Dialog，Tooltip 以及 Select 等。這些組件都有一個特點，它們的彈出層通常不是渲染在當前的 DOM 樹中，而是直接插入在 body （或者其它類似的...
摘要：問題概述問題移動端輸入框鍵盤喚起后定位好的元素跟隨頁面滾動了起來屬性失效了滿屏任性橫飛如下圖問題有第三方輸入法的機還會出現(xiàn)鍵盤彈出延遲，導致普通布局輸入框等位置靠下的被鍵盤擋住如下圖這個完成出來然后鍵盤再頂起完美解決方案在輸入框獲取焦點 問題概述 問題1：H5 web 移動端 輸入框, 鍵盤喚起后fixed定位好的元素跟隨頁面滾動了起來… fixed屬性失效了！滿屏任性橫飛, 如下圖:...
閱讀 1198·2021-11-10 11:35
閱讀 2925·2021-09-24 10:35
閱讀 2957·2021-09-22 15:38
閱讀 2807·2019-08-30 15:43
閱讀 1338·2019-08-29 18:39
閱讀 2558·2019-08-29 15:22
閱讀 2789·2019-08-28 18:17
閱讀 612·2019-08-26 13:37
