将夜猫腻小说,怎么写网络小说,武道至尊帝临小说

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

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

微信小程序吸底區域適配iPhoneX的實現_javascript技巧_本站

舊方法

1. 獲取設備信息

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

2. 設置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. 設置一個標識符isIpx存在vuex中，在小程序初始化完成時判斷

在 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: {
   //判斷設備是否是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. 在需要適配的頁面中設置

如在 demo.vue 中處理

<template>
   <div class="fix-view"
     :class="isIpx?'view-fix-iphonex':''"
  >
   吸附在底部的區域
  </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 的一個 CSS 函數，用于設定安全區域與邊界的距離，有四個預定義的變量：

safe-area-inset-left：安全區域距離左邊邊界距離
safe-area-inset-right：安全區域距離右邊邊界距離
safe-area-inset-top：安全區域距離頂部邊界距離
safe-area-inset-bottom：安全區域距離底部邊界距離

這里我們只需要關注 safe-area-inset-bottom 這個變量，因為它對應的就是小黑條的高度（橫豎屏時值不一樣）。

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

在這之前，筆者使用的是 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() 需要同時存在，而且順序不能換。

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

如何適配

了解了以上所說的幾個知識點，接下來我們適配的思路就很清晰了。

第一步：設置網頁在可視窗口的布局方式

新增 viweport-fit 屬性，使得頁面內容完全覆蓋整個窗口：

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

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

第二步：頁面主體內容限定在安全區域內

這一步根據實際頁面場景選擇，如果不設置這個值，可能存在小黑條遮擋頁面最底部內容的情況。

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

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

微信小程序吸底區域適配iPhoneX的實現_javascript技巧_本站

可以通過加內邊距 padding 擴展高度：

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

或者通過計算函數 calc 覆蓋原來高度：

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

注意，這個方案需要吸底條必須是有背景色的，因為擴展的部分背景是跟隨外容器的，否則出現鏤空情況。

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

{ 
	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），比如 “返回頂部”、“側邊廣告” 等

像這種只是位置需要對應向上調整，可以僅通過外邊距 margin 來處理：

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

或者，你也可以通過計算函數 calc 覆蓋原來 bottom 值：

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

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

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

@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); 
  }
}

到此這篇關于微信小程序吸底區域適配iPhoneX的實現的文章就介紹到這了,更多相關小程序吸底區域適配iPhoneX內容請搜索本站以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持本站！

您可能感興趣的文章:

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

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

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

當前位置:雨林木風下載站 > 蘋果教程教程 > 詳細頁面

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

本類教程下載

系統下載排行