在小程序开发时有这样一个要求,不用小程序本身的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,你无须超越谁,只要超越昨天的自己就好~