解決APP項目中web-view趁機高，覆蓋其他內容的問題

最近進行了一個app項目，使用的是uniapp框架。項目中使用了web-view引入了外部鏈接。代碼如下：

chat-dialog.vue頁面

<web-view :webview-styles="webviewStyles" :src="url">  
                
</web-view>

但問題是，這個頁面中再去寫別的內容就會被覆蓋掉，如頂部自定義導航被覆蓋、加入的對話框被覆蓋。

page.json中配置了當前頁面的頂部導航為自定義樣式，所以被覆蓋。這里只有設置默認的頂部導航才會顯示。

{
            "path" : "pages/chat-detail/chat-dialog",
            "style" :                                                                                    
            { 
                "navigationBarTitleText": "",
                "navigationBarBackgroundColor": "#fff",
                "navigationBarTextStyle": "black",
                "app-plus": {
                    "bounce": "none",
                    "titleNView": {
                        "buttons": [
                            {
                                "text": "投訴",
                                "fontSize":"24rpx",
                                "color":"#000"
                            }
                        ]
                    }
                }
            } 
}     

因為需要，所以右側加了個按鈕，通過 配置titleNView里邊相關參數，就可以展示出效果

 

那點擊時間是如何寫的，怎么生效了呢？

在該頁面和methods同級下寫入onNavigationBarButtonTap事件：

// #ifdef APP-PLUS             
        onNavigationBarButtonTap(e) {
            uni.navigateTo({
                url: "/pages/dialog-tousu/dialog-tousu",
                animationType:"none"         //加上，完美解決底部留白
            })  
                         
        }
// #endif

沒錯，這里是跳轉了新頁面，但是可以通過在page.json中配置新頁面屬性style中的背景為透明實現想要的效果

{
    "path": "pages/dialog-tousu/dialog-tousu",
    "style": {
        "navigationStyle": "custom",
        "navigationBarTextStyle": "white",
        "background": "transparent",              //把頁面背景設置透明，默認是白色
        "animationType": "fade-in"
    }
}

效果圖：其實就是在chat-dialog頁面上加了個dialog-tousu頁面，將dialog-tousu頁面背景設置透明。這樣就好像是對話框一樣。