1. 程式人生 > >記錄下最近使用的 mui 的一些 bug

記錄下最近使用的 mui 的一些 bug

Get Started:

mui 官網是這麼介紹自己的,最接近原生 APP 體驗的高效能前端框架(是不是大家用了之後自己感覺吧)。之前有短暫的使用過 dcloud 的 hbuilder 編輯器,也知道它能進行 app 開發。首先要了解一下 HTML5+ 的標準,然後熟悉一下 mui 的元件,還有它自身的事件管理、視窗管理、自己封裝的 Ajax 函式等等。入手的話,先熟悉下 hbuilder 這個編輯器吧,熟悉一些常用的功能。然後瞭解 HTML5+ ,瞭解常用的 mui 頁面跳轉、事件管理和請求的方法。最後,再去學習多端釋出和流應用。流應用是 dcloud 的一個創新產品,基於HTML5+技術,可達到原生應用的體驗。具體是什麼東西,去百度下就都出來啦。

學習的時候,這個作者有關 mui 的教程應該是看過中最全的了。
戳這裡

問題1:

app端連續關閉多頁面時候,某些應該顯示的 webview 的 z-index 值會變小或者隱藏掉。使得這個功能看起來回到了首頁...很尷尬。

解決的方法:
關閉頁面後,給需要顯示的 webview 呼叫一下 show 的方法。

問題2:

當上拉載入容器上有內容時,ios與Android頁面距離頂部的距離不一樣。

解決方法:
只能是通過判斷系統之後...去分別設定 margin 。

問題3:

mui back兼聽不到ios側滑。

解決方法:禁用側滑...(hhh)

安卓手機輸入法擠壓介面解決辦法

一、首先說一下頁面會變形的原因,主要是因為定位用的是fixed或者absolute,在頁面輸入框彈出時,導致clientHeight變化引起的。

解決辦法:

1、如果是mui等混合app的頁面:

var originalHeight=document.documentElement.clientHeight || document.body.clientHeight;

window.onresize=function(){

    var  resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;

    if(resizeHeight*1<originalHeight*1){

         plus.webview.currentWebview().setStyle({height:originalHeight });

     }

}

2、如果是html頁面的話,我是利用把fixed或者absolute的元素定位轉成relative來解決的:


var originalHeight=document.documentElement.clientHeight || document.body.clientHeight;
      document.querySelector('.container').style.height=originalHeight.toString()+'px'
      window.onresize=function(){
        var  resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
        if(resizeHeight*1<originalHeight*1){ 
            document.querySelector('.section-bottom').style.position='relative'
        }else{
          document.querySelector('.section-bottom').style.position='fixed'
---------------------