吸底布局盡量不要使用fixed布局,客戶端里的表現可能跟微信里不一樣。 目前頁面在需要考慮如下情況適配: 微信IOS 微信安卓 醫生端安卓 醫生端IOS 用戶端安卓 用戶端IOS iphone普通屏 iphone x及以后的長屏
<template> <div class="container"> <div class="header">我是head</div> <div class="content">我是content</div> <div class="footer">我是foot</div> </div> </template>
.container { height:100%; min-height: 100%; width: 100%; // flex布局核心代碼 display: flex; flex-direction: column; .content { flex: 1; overflow-y: scroll; } .footer { // 適配iphone X 及以后機型 @include iphonex(margin-bottom); } }
// 適配iphonex及以后的底部. // $name可選'margin-bottom','bottom','padding-bottom' 等等 @mixin iphonex($name) { @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { #{$name}: constant(safe-area-inset-bottom); #{$name}: env(safe-area-inset-bottom); } }