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