图一为默认导航下的下拉刷新，显示正常，图二为自定义导航栏下的下拉刷新，显示异常，中间有一大块空白。
如果解决这个问题，我们自定义一个加载动画，藏在导航底下
（1）把app.json中的window设置为如下，这样加载动画就隐藏了，因为加载动画必须要设置window的backgroundTextStyle=black和backgroundColor=#F3F3F3才会显示如上图所示
window: { "navigationStyle": "custom", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "ICY买手店", "navigationBarTextStyle": "black"}
（2）修改Navigation.wxml
<view> <view> <view wx:if="{{showIcon}}"> <view bindtap="headerBack"><image src="https://dn-testimage.qbox.me/Files/08/6b/086b8e19c7a5aa031dc4df31ca8b53ac2ed32212_644.png"></image></view> <view></view> <view bindtap="headerHome"><image src="https://dn-testimage.qbox.me/Files/fc/49/fc4958729bf1937667b68c78f495edeafe30f339_1030.png"></image></view> </view> <view>{{title}}</view> </view> <view><image src="https://dn-testimage.qbox.me/Files/e0/35/e03562502eae6d5944bed747b7c21a3c2cce1ff8_1250.gif"></image></view> </view>
效果如下图，加载动画我可能写的不太好看
问题：这样做在iPhone上是能正常展示的，但是在安卓上还有一点小问题，自定义导航栏的标题和图标有一起滑动
注意点
（1）安卓手机下拉刷新还是会有一点点展示问题
（2）项目所有fixed的元素都需要改，top需要加上导航栏的高度
目前哪些小程序在用自定义导航栏
我所知道的有 “bilibili”，"票圈长视频"，我们公司的小程序也在计划用
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: