微信小程序——IOS对sticky布局的支持，自定义navigation

在小程序开发时有这样一个要求，不用小程序本身的header，而是自己封装一个navigation，令其可以支持图片，文字等任意形式。

1.自定义navigation

我们可以在要求的页面的json文件中

{
  "navigationStyle":"custom",   // 支持自定义navigation
}

2.封装组件header

<view class="theader my-class">
  <view class="theader-right" catchtap="toChooseCity">
    <image class="theader-right-icon" src="../../../assets/common/positionYellow.png" mode="aspectFill"/>
    <view class="theader-right-name">{{cityName}}</view>
  </view>
  <image catchtap="toHome" class="theader-left" mode="aspectFill" src="../../../assets/common/logo.png"/>
</view>

你可以设置任意你想要的样子

3.注册并引用header

xxx.json
"t-header":"/components/common/THeader/THeader",

xxx.wxml
<t-header />

4.sticky布局(IOS中处理)

我们要求header要sticky在某些页面的最上方

  position: sticky;
  top: 0;
  z-index: 999;

但当我们在header中准备统一设置这个样式的时候，发现安卓和微信开发者工具中都可以生效，在IOS上却不生效，查看开发者文档中大家的回答发现，出现这种情况的原因是，如果我们想令某个位置吸顶，那么一定要在渲染出来的元素的page标签下面这一层设置，否则不会生效，即这一层
那我们就可以在组件引入的页面中最外层套一层这个view，并将样式加上就可以解决啦

xxx.wxml

<view class="commonHeader">
  <t-header />
</view>

.commonHeader{
  position: sticky;
  top: 0;
  z-index: 999;
}

这样就可以解决啦，在真机上面调试也没有问题啦~

5.不同屏幕上自定义组件遮挡问题

我们由于使用了自定义navigation，所以在不同的屏幕上显示内容是不同的，比如设置固定高度内容在刘海屏上显示就是有问题的，会有遮挡，所以在设置高度时，我们可以获取

xxxx.js

      let sysinfo = wx.getSystemInfoSync();
      this.setData({ 
        statusBarHeight:sysinfo.statusBarHeight 
      })


xxxx.wxml
<view class="theader my-class" style="height:{{statusBarHeight+8}}px"></view>

方法详解来源

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~