完美世界有声小说,盗墓笔记小说全集,玄幻小说排行榜

導(dǎo)讀微信小程序適配iPhone X主要針對fix定位到底部的區(qū)域，比如詳情頁或購物車底部的按鈕欄，會(huì)與iPhone X的Home Indicator橫條重疊，這樣在點(diǎn)擊下方按鈕時(shí)很容易誤觸發(fā)手勢操作，如...

微信小程序適配iPhone X主要針對fix定位到底部的區(qū)域，比如詳情頁或購物車底部的按鈕欄，會(huì)與iPhone X的Home Indicator橫條重疊，這樣在點(diǎn)擊下方按鈕時(shí)很容易誤觸發(fā)手勢操作，如下圖：

微信小程序吸底區(qū)域適配iPhoneX的實(shí)現(xiàn)_javascript技巧_本站

舊方法

1. 獲取設(shè)備信息

/**
 * 獲取設(shè)備信息
 * @returns {Promise<any>}
 */
export function wechatGetSystemInfo () {
 return new Promise((resolve, reject) => {
  wx.getSystemInfo({
   success: (res) => {
    resolve(res)
   }, fail: (err) => {
    reject(err)
   }
  })
 })
}

2. 設(shè)置css樣式

.view-fix-iphonex {
 bottom: ~'68rpx' !important;
}

.view-fix-iphonex::after {
 content: ' ';
 position: fixed;
 bottom: 0 !important;
 height: ~'68rpx' !important;
 width: 100%;
 background: #fff;
}

3. 設(shè)置一個(gè)標(biāo)識符isIpx存在vuex中，在小程序初始化完成時(shí)判斷

在 App.vue 中處理

<script>
 import wx from 'wx'
 import { mapGetters, mapActions } from 'vuex'
 import { wechatGetSystemInfo } from './utils/weappUtils'

 export default {
  onLaunch () {
   this.isIphoneX()
  },
  computed: {
   ...mapGetters(['isIpx'])
  },
  methods: {
   //判斷設(shè)備是否是iphoneX
   isIphoneX() {
    wechatGetSystemInfo().then(res => {
     const deviceModel = 'iPhone X'
     let isIpx = false
     if (res.model.indexOf(deviceModel) > -1) {
      isIpx = true
     }
     if (this.isIpx !== isIpx) {
      this.setIsIpx(isIpx)
     }
    }).catch(err => {})
   },
   ...mapActions(['setIsIpx'])
  }
 }
</script>

4. 在需要適配的頁面中設(shè)置

如在 demo.vue 中處理

<template>
   <div class="fix-view"
     :class="isIpx?'view-fix-iphonex':''"
  >
   吸附在底部的區(qū)域
  </div>
</template>


<script>
 import wx from 'wx'
 import {mapGetters} from 'vuex'

 export default {
  computed: {
   ...mapGetters(['isIpx'])
  },
 }
</script>

<style lang="less">
  .fix-view {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   height: ~'100rpx';
   line-height: ~'100rpx';
   box-sizing: border-box;
   text-align: right;
   display: flex;
   justify-content: end;
   background: #fff;
  }
</style>

新方法

env() 和 constant()

iOS11 新增特性，Webkit 的一個(gè) 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ū)域距離底部邊界距離

這里我們只需要關(guān)注 safe-area-inset-bottom 這個(gè)變量，因?yàn)樗鼘?yīng)的就是小黑條的高度（橫豎屏?xí)r值不一樣）。

注意：當(dāng) viewport-fit=contain 時(shí) env() 是不起作用的，必須要配合 viewport-fit=cover 使用。對于不支持env() 的瀏覽器，瀏覽器將會(huì)忽略它。

在這之前，筆者使用的是 constant()，后來，官方文檔加了這么一段注釋（坑）：

The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward.

這就意味著，之前使用的 constant() 在 iOS11.2 之后就不能使用的，但我們還是需要做向后兼容，像這樣：

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

注意：env() 跟 constant() 需要同時(shí)存在，而且順序不能換。

更詳細(xì)說明，參考文檔：Designing Websites for iPhone X

如何適配

了解了以上所說的幾個(gè)知識點(diǎn)，接下來我們適配的思路就很清晰了。

第一步：設(shè)置網(wǎng)頁在可視窗口的布局方式

新增 viweport-fit 屬性，使得頁面內(nèi)容完全覆蓋整個(gè)窗口：

<meta name="viewport" content="width=device-width, viewport-fit=cover">

前面也有提到過，只有設(shè)置了 viewport-fit=cover，才能使用 env()。

第二步：頁面主體內(nèi)容限定在安全區(qū)域內(nèi)

這一步根據(jù)實(shí)際頁面場景選擇，如果不設(shè)置這個(gè)值，可能存在小黑條遮擋頁面最底部內(nèi)容的情況。

body { 
	padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

第三步：fixed 元素的適配類型一：fixed 完全吸底元素（bottom = 0），比如下圖這兩種情況：

微信小程序吸底區(qū)域適配iPhoneX的實(shí)現(xiàn)_javascript技巧_本站

可以通過加內(nèi)邊距 padding 擴(kuò)展高度：

{ 
	padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

或者通過計(jì)算函數(shù) calc 覆蓋原來高度：

{ 
	height: calc(60px(假設(shè)值) + constant(safe-area-inset-bottom));
  height: calc(60px(假設(shè)值) + env(safe-area-inset-bottom));
}

注意，這個(gè)方案需要吸底條必須是有背景色的，因?yàn)閿U(kuò)展的部分背景是跟隨外容器的，否則出現(xiàn)鏤空情況。

還有一種方案就是，可以通過新增一個(gè)新的元素（空的顏色塊，主要用于小黑條高度的占位），然后吸底元素可以不改變高度只需要調(diào)整位置，像這樣：

{ 
	margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}

空的顏色塊：

{ 
	position: fixed;
  bottom: 0;
  width: 100%;
  height: constant(safe-area-inset-bottom);
  height: env(safe-area-inset-bottom);
  background-color: #fff;
}

類型二：fixed 非完全吸底元素（bottom ≠ 0），比如 “返回頂部”、“側(cè)邊廣告” 等

像這種只是位置需要對應(yīng)向上調(diào)整，可以僅通過外邊距 margin 來處理：

{ 
	margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}

或者，你也可以通過計(jì)算函數(shù) calc 覆蓋原來 bottom 值：

{ 
	bottom: calc(50px(假設(shè)值) + constant(safe-area-inset-bottom));
  bottom: calc(50px(假設(shè)值) + env(safe-area-inset-bottom));
}

你也可以使用 @supports 隔離兼容樣式

寫到這里，我們常見的兩種類型的 fixed 元素適配方案已經(jīng)了解了吧。如果我們只希望 iPhoneX 才需要新增適配樣式，我們可以配合 @supports 來隔離兼容樣式，當(dāng)然這個(gè)處理對頁面展示實(shí)際不會(huì)有任何影響：

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { 
	div {
  	margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom); 
  }
}

到此這篇關(guān)于微信小程序吸底區(qū)域適配iPhoneX的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)小程序吸底區(qū)域適配iPhoneX內(nèi)容請搜索本站以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持本站！

您可能感興趣的文章:

微信小程序 iPhoneX底部安全區(qū)域（底部小黑條）適配(一分鐘解決)
微信小程序適配iphoneX的實(shí)現(xiàn)方法

溫馨提示：喜歡本站的話，請收藏一下本站！

日本国产亚洲-日本国产一区-日本国产一区二区三区-日本韩国欧美一区-日本韩国欧美在线-日本韩国欧美在线观看

當(dāng)前位置:雨林木風(fēng)下載站 > 蘋果教程教程 > 詳細(xì)頁面

微信小程序吸底區(qū)域適配iPhoneX的完成_javascript技巧

本類教程下載

系統(tǒng)下載排行