欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解mpvue實(shí)現(xiàn)對(duì)蘋果X安全區(qū)域的適配

 更新時(shí)間:2019年07月31日 16:02:26   作者:bayi_lzp  
這篇文章主要介紹了詳解mpvue實(shí)現(xiàn)對(duì)蘋果X安全區(qū)域的適配,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、業(yè)務(wù)背景

最近在利用mpvue+ts開發(fā)小程序的過(guò)程中,由于蘋果X等手機(jī)會(huì)出現(xiàn)底部的按鈕,會(huì)遮蓋掉需要操作的按鈕。由于在小程序開發(fā),微信爸爸已經(jīng)做了對(duì)機(jī)型的檢查,相對(duì)與H5的處理來(lái)說(shuō)方便很多了。下面就稍微羅列一下解決方案。

二、實(shí)現(xiàn)思路

  1. 判斷機(jī)型方法
  2. 注入全局組件mixin
  3. 加入全局安全距離css
  4. 頁(yè)面上進(jìn)行class類處理

三、實(shí)現(xiàn)過(guò)程

1、判斷機(jī)型方法

小程序的官方文檔提供了一個(gè)方法wx.getSystemInfo,我們可以利用該方法來(lái)對(duì)小程序的對(duì)應(yīng)的手機(jī)型號(hào)進(jìn)行判斷,是否需要加上安全距離。在工具類文件新建safe-area.js文件,編寫下面代碼,這里返回一個(gè)Project,方便取值。

let cache = null;
export default function getSafeArea() {
  return new Promise((resolve, reject) => {
    if (cache != null) {
    // 如果有緩存不行行調(diào)用
      resolve(cache);
    }
    else {
    // 獲取系統(tǒng)信息
      wx.getSystemInfo({
        success: ({ model, screenHeight, statusBarHeight }) => {
          const iphoneX = /iphone x/i.test(model);
          const iphoneNew = /iPhone11/i.test(model) && screenHeight === 812;
          cache = {
            isIPhoneX: iphoneX || iphoneNew,
            statusBarHeight
          };
          resolve(cache);
        },
        fail: reject
      });
    }
  });
}

2、注入全局組件mixin

因?yàn)閙pvue是具有mixin這個(gè)屬性的,我們可以利用混入安全距離的處理方法。用法基本跟vue一致。新建mixins.js,注入插件,在這個(gè)過(guò)程中需要注意一點(diǎn),就是如果不進(jìn)行頁(yè)面類型的判斷,會(huì)出現(xiàn)如果引用組件也會(huì)進(jìn)行注入該方法。所以需要加入進(jìn)行判斷

 Vue.prototype.$isPage = function isPage() {
  return this.$mp && this.$mp.mpType === 'page'
 }

在mounted過(guò)程中進(jìn)行處理,可以避免不必要的注入。

import getSafeArea from '../utils/safe-area'
let MyPlugin = {};
MyPlugin.install = function (Vue) {
 // 添加全局方法或?qū)傩?
 Vue.prototype.$isPage = function isPage() {
  return this.$mp && this.$mp.mpType === 'page'
 }
 // 注入組件
 Vue.mixin({
  data() {
   return {
    isIPhoneX: this.isIPhoneX,
   }
  },
  mounted() {
   if (this.$isPage()) {
    getSafeArea().then(({ isIPhoneX, statusBarHeight }) => {
     this.isIPhoneX = isIPhoneX
    });
   }
  }
 })
}
export default MyPlugin

在main.js中注冊(cè)該插件

import MyPlugin from './minxins'
Vue.use(MyPlugin)

3、加入全局安全距離css

為了我們不需要在每一個(gè)文件進(jìn)行樣式的聲明,我們可以在全局樣式中寫入安全距離的類

.safeArea {
 padding-bottom: 34px!important;
}

4、頁(yè)面上進(jìn)行class類處理

處理完以上部分我們可以對(duì)頁(yè)面上需要處理的區(qū)域,加入:class="{safeArea: isIPhoneX}"進(jìn)行修改,例如:

  <div class="handle" :class="{safeArea: isIPhoneX}">
   <div class="home" @click="goHome"></div>
   <div class="submit" @click="buy">立即購(gòu)買</div>
  </div>

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue使用antd中input組件去驗(yàn)證輸入框輸入內(nèi)容(rules?案例)

    Vue使用antd中input組件去驗(yàn)證輸入框輸入內(nèi)容(rules?案例)

    這篇文章主要介紹了Vue使用antd中input組件去驗(yàn)證輸入框輸入內(nèi)容-rules-案例,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-06-06
  • VUE-Table上綁定Input通過(guò)render實(shí)現(xiàn)雙向綁定數(shù)據(jù)的示例

    VUE-Table上綁定Input通過(guò)render實(shí)現(xiàn)雙向綁定數(shù)據(jù)的示例

    今天小編就為大家分享一篇VUE-Table上綁定Input通過(guò)render實(shí)現(xiàn)雙向綁定數(shù)據(jù)的示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-08-08
  • Vue-Router如何動(dòng)態(tài)更改當(dāng)前頁(yè)url query

    Vue-Router如何動(dòng)態(tài)更改當(dāng)前頁(yè)url query

    這篇文章主要介紹了Vue-Router如何動(dòng)態(tài)更改當(dāng)前頁(yè)url query問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-08-08
  • vue3+ts代理的使用

    vue3+ts代理的使用

    本文主要介紹了vue3+ts代理的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-12-12
  • Vue新手指南之創(chuàng)建第一個(gè)vue-cli腳手架程序

    Vue新手指南之創(chuàng)建第一個(gè)vue-cli腳手架程序

    vue-cli 是一個(gè)官方發(fā)布 vue.js 項(xiàng)目腳手架,使用 vue-cli 可以快速創(chuàng)建 vue 項(xiàng)目。這篇文章主要給大家介紹了關(guān)于Vue新手指南之創(chuàng)建第一個(gè)vue-cli程序的相關(guān)資料,需要的朋友可以參考下
    2021-05-05
  • 解決vue的component標(biāo)簽渲染問(wèn)題

    解決vue的component標(biāo)簽渲染問(wèn)題

    這篇文章主要介紹了解決vue的component標(biāo)簽渲染問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • vue中electron框架自定義外部配置文件的配置與讀取辦法

    vue中electron框架自定義外部配置文件的配置與讀取辦法

    使用Electron開發(fā)本地跨平臺(tái)的本地程序時(shí),有時(shí)需要添加一些程序的配置文件,下面這篇文章主要給大家介紹了關(guān)于vue中electron框架自定義外部配置文件的配置與讀取的相關(guān)資料,需要的朋友可以參考下
    2023-12-12
  • Vue3中Composition?API和Options?API的區(qū)別

    Vue3中Composition?API和Options?API的區(qū)別

    Vue3的Composition API和Options API是Vue.js框架中的兩種不同的API,本文主要介紹了Vue3中Composition?API和Options?API的區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-06-06
  • vue使用driver.js完成頁(yè)面引導(dǎo)功能的示例詳解

    vue使用driver.js完成頁(yè)面引導(dǎo)功能的示例詳解

    在Vue中,driver.js通常是指用于實(shí)現(xiàn)用戶引導(dǎo)和教程功能的JavaScript庫(kù),它可以幫助開發(fā)者在應(yīng)用程序中創(chuàng)建交互式的引導(dǎo)和教程,以引導(dǎo)用戶了解應(yīng)用程序的不同功能和界面,本文就簡(jiǎn)單的給大家介紹一下vue如何使用driver.js完成頁(yè)面引導(dǎo)功能
    2023-08-08
  • 詳解vue更改頭像功能實(shí)現(xiàn)

    詳解vue更改頭像功能實(shí)現(xiàn)

    這篇文章主要介紹了vue更改頭像功能實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04

最新評(píng)論