最近進行了一個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事件：

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

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

1 {
2     "path": "pages/dialog-tousu/dialog-tousu",
3     "style": {
4         "navigationStyle": "custom",
5         "navigationBarTextStyle": "white",
6         "background": "transparent",              //
 
把頁面背景設定透明，預設是白色
7         "animationType": "fade-in"
8     }
9 }

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