vue項(xiàng)目中頁面底部出現(xiàn)白邊及空白區(qū)域錯(cuò)誤的問題
更新時(shí)間：2022年08月25日 09:25:31 作者：斜影梧桐
這篇文章主要介紹了vue項(xiàng)目中頁面底部出現(xiàn)白邊及空白區(qū)域錯(cuò)誤的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue頁面底部出現(xiàn)白邊及空白區(qū)域錯(cuò)誤問題
頁面底部出現(xiàn)白邊
類似于這種
我的把body，app，html里面的margin和padding都設(shè)置為0了但是還是有白邊出現(xiàn)，最后找到的解決方法：
把a(bǔ)pp里面的全局背景圖換到了body里面，然后白邊就沒了
看到一個(gè)解釋是：白邊可能是vue框架弄的
故解決辦法是：把body也設(shè)置背景色
底部出現(xiàn)空白區(qū)域
檢查內(nèi)容區(qū)是否超出html區(qū)域
vue頁面四周有白邊的問題
在export default的代碼中添加如下代碼，設(shè)置body的屬性margin:0和padding:0
beforeRouteEnter(to, from, next) {
? ? ? // 添加背景色 margin:0;padding:0是為了解決vue四周有白邊的問題
? ? ? document.querySelector('body').setAttribute('style', 'margin:0;padding:0')
? ? ? next()
? ? },
? ? beforeRouteLeave(to, from, next) {
? ? ? // 去除背景色
? ? ? document.querySelector('body').setAttribute('style', '')
? ? ? next()
? ? },再刷新下看看，四周的白邊已經(jīng)消失了
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue是組件化開發(fā)框架,所以對于vue應(yīng)用來說組件間的數(shù)據(jù)通信非常重要,下面這篇文章主要給大家介紹了關(guān)于高頻率Vue面試題以及答案的相關(guān)資料,需要的朋友可以參考下2023-02-02
Element-ui table中過濾條件變更表格內(nèi)容的方法
下面小編就為大家分享一篇Element-ui table中過濾條件變更表格內(nèi)容的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了vuex實(shí)現(xiàn)購物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了vue如何在data中引入圖片的正確路徑，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue2封裝webSocket的實(shí)現(xiàn)(開箱即用)
在Vue2中,可以使用WebSocket實(shí)時(shí)通信,本文主要介紹了vue2封裝webSocket的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
elementui中的el-cascader級聯(lián)選擇器的實(shí)踐
本文主要介紹了elementui中的el-cascader級聯(lián)選擇器的實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
vue使用screenfull插件實(shí)現(xiàn)全屏功能
這篇文章主要為大家詳細(xì)介紹了vue使用screenfull插件實(shí)現(xiàn)全屏功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
Vue使用wavesurfer.js實(shí)現(xiàn)音頻可視化的示例詳解
WaveSurfer.js是一個(gè)開源的音頻可視化庫,用于創(chuàng)建交互式、可定制的波形,本文將為大家簡單介紹了Vue如何使用wavesurfer.js實(shí)現(xiàn)音頻可視化功能,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-04-04
Vue3實(shí)現(xiàn)地圖選點(diǎn)組件的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue3實(shí)現(xiàn)地圖選點(diǎn)組件的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
vue3+element 分片上傳與分片下載功能實(shí)現(xiàn)方法詳解
這篇文章主要介紹了vue3+element 分片上傳與分片下載功能實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了vue3+element 分片上傳與下載相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2023-06-06