微信小程序自定义头部tabBar中判断iphoneX刘海头部,并自适应

js部分

var page_this = this;

var sysinfo = wx.getSystemInfoSync(),

statusHeight = sysinfo.statusBarHeight, 

 isiOS = sysinfo.system.indexOf("iOS") > -1, 

 navHeight; 

 if (!isiOS) { 

     navHeight = 48; 

 } else { 

     navHeight = 44; 

 }

wx.getSystemInfo({

    success: (res) => {

        page_this.setData({

            windowHeight: res.windowHeight,

            windowWidth: res.windowWidth,

            statusHeight: statusHeight,

            navHeight: navHeight

        })

    }

})


wxml部分

<!--头部内容填充-->

<view class="h-false" style="height:{{statusHeight + navHeight}px;"></view>

<!-- 人造头部  -->

<view class="h">

    <view class="h-t" style="padding-top:calc({{statusHeight}}px - 8px);">

    <!--返回按钮-->

        <navigator class="h-t-left" open-type="reLaunch" url="../index/index" style="top:calc({{statusHeight}}px + 2px);">

            <text class="iconfont icon-back"></text>

            <text class="clearfix"></text>

        </navigator>

        <!--居中标题-->

        <view class="h-t-title">

            <text>标题标题</text>

        </view>

    </view>

</view>


wxss部分

/*头部*/

.h{

  background:#fff;

  color: #000;

  font-size: 32rpx;

  text-align: center;

  font-family: PingFangSC-regular;

  /*position: fixed;*/

  width: 100%;

  top: 0;

  left: 0;

  z-index: 100;

}

.h-t{

  position: relative;

}

.h-t .h-t-left{

  left: 30rpx;

  font-size: 32rpx;

  width: 64rpx;

  height: 64rpx;

  position: absolute;

}

.h-t .icon-back{

  vertical-align: middle;

  font-size: 52rpx;

  color:#C7C7CC;

}

.h-t .h-t-title{

  font-size: 14px;

  /* padding:16px 0; */

  padding:5px 0;

  /* min-height: 16px; */

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容