Vant如何自定義組件適配iphone底部安全區(qū)
更新時(shí)間：2024年03月14日 10:14:42 作者：超喜歡你呦
這篇文章主要介紹了Vant如何自定義組件適配iphone底部安全區(qū)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
場(chǎng)景
- IM
問(wèn)題
聊天界面輸入框在iphone下被底部指示條遮蓋
如下圖：
解決方案
參考 Vant 內(nèi)置組件適配方案
Vant文檔：https://vant-contrib.gitee.io/vant/#/zh-CN/advanced-usage
Vant 內(nèi)置組件中添加了 safe-area-inset-bottom 屬性，即是在css中添加對(duì)應(yīng)樣式
iOS11 的新增特性，Webkit 的 CSS 函數(shù)，用于設(shè)定安全區(qū)域與邊界的距離
它有四個(gè)預(yù)定義的變量：
safe-area-inset-left：安全區(qū)域距離左邊邊界距離safe-area-inset-right：安全區(qū)域距離右邊邊界距離safe-area-inset-top：安全區(qū)域距離頂部邊界距離safe-area-inset-bottom：安全區(qū)域距離底部邊界距離
第一步：在 index.html 的 head 標(biāo)簽中加入以下 meta：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
第二步：在項(xiàng)目 index.css 中添加下列樣式：
/**
* 適配 iphone 底部安全區(qū)（指示條，配合index.html <meta name="viewport" ... />使用
*/
@supports (bottom: env(safe-area-inset-bottom)){
#app {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
}
@supports 是CSS3新引入的規(guī)則之一
主要用于檢測(cè)當(dāng)前瀏覽器是否支持某個(gè)CSS屬性并加載具體樣式
大功告成~
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue集成kindeditor富文本的實(shí)現(xiàn)示例代碼
這篇文章主要介紹了vue集成kindeditor富文本的實(shí)現(xiàn)示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
組件Component是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼，這篇文章主要介紹了Vue.js 2.x：組件的定義和注冊(cè),需要的朋友可以參考下2018-06-06
這篇文章主要介紹了vue axios登錄請(qǐng)求攔截器，判斷是否登錄超時(shí)，或?qū)φ?qǐng)求結(jié)果做一個(gè)統(tǒng)一處理的教程詳解,需要的朋友可以參考下2018-04-04
本篇文章主要介紹了Vue引入遠(yuǎn)程JS文件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
vue-resource 攔截器（interceptor）的使用詳解
本篇文章主要介紹了vue-resource 攔截器（interceptor）的使用詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
這篇文章主要為大家介紹了VUE的數(shù)據(jù)代理與事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2021-11-11
這篇文章主要介紹了Vue的自定義事件之組件通信工具詳解,Vue的自定義事件(Custom Events)是一種強(qiáng)大的工具,用于實(shí)現(xiàn)組件之間的通信和數(shù)據(jù)傳遞,本文將深入探討什么是Vue的自定義事件,以及如何自定義和使用它們,需要的朋友可以參考下2023-10-10
dep.notify() 是Vue2響應(yīng)式系統(tǒng)中觸發(fā)依賴更新的核心方法,也是理解Vue2 視圖“自動(dòng)更新”的關(guān)鍵,本文給大家介紹Vue dep.notify() 含義及作用,感興趣的朋友跟隨小編一起看看吧2025-12-12
vue兩個(gè)輸入框聯(lián)動(dòng)校驗(yàn)方式(最大值-最小值)
這篇文章主要介紹了vue兩個(gè)輸入框聯(lián)動(dòng)校驗(yàn)方式(最大值-最小值)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
VsCode新建VueJs項(xiàng)目的詳細(xì)步驟
本篇文章主要介紹了VsCode新建VueJs項(xiàng)目的詳細(xì)步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09