微信小程序导航条配置图片背景
微信小程序导航条配置图片背景
需要实现通栏背景的效果(导航那里还有背景图片)
全部页面替换
如果自定义导航栏,会存在需要考虑的问题
-
如果有上一页,就返回上一页,否则直接返回首页(首页),图标也要跟着换
-
标题取配置里的(如果可以的话,否则就用组件传参,去掉配置里的,以免造成误解)
- 背景图片拼接(首页的时候)
就首页特殊,其他页面纯色导航条(沿用微信那套)
网上搜索的方案是自定义导航栏,都是在全局设置了 navigationStyle
这一属性,但总感觉太复杂了,需要考虑前面记下的一些处理细节,想着再看看有没有其他简便点的方案
观察了几个小程序,发现在 Android 下,标题居左, iOS 下,标题居中
- 这和微信原生导航表现一致,故推测参考小程序的做法是首页做了特殊处理,其他页面沿用微信的
- 这感觉就很像是微信小程序的配置,那就去官方文档找找看页面配置里有没有
navigationStyle
配置项,果不其然,有- 那我就首页配置一下,不要导航,自己设置顶部背景,其他页面不管,用默认的导航,不就实现了我想要的效果了吗?
- 那我就首页配置一下,不要导航,自己设置顶部背景,其他页面不管,用默认的导航,不就实现了我想要的效果了吗?
相关代码
index.json
- 这样设置后,index 页面原来微信的导航栏就会消失了,自己通过调整页面布局实现效果
{
"usingComponents": {},
"navigationStyle": "custom" // 关键点
}
index.wxml
<view class="pageContainer">
<!-- 背景(安全起见图片地址打码处理了) -->
<image class="navBg" mode="widthFix" src="https://www.xxxx.com/background.png"></image>
<!-- 第一个页面元素(图中视频) -->
<view class="videoBanner">
<video src="{{videoUrl}}" show-center-play-btn enable-progress-gesture show-mute-btn auto-pause-if-navigate
auto-pause-if-open-native title="金东区宣传视频--和美金东" class="inner_video" poster="{{videoPosterUrl}}"></video>
<!-- 其他页面内容 -->
</view>
</view>
index.wxss
.navBg {
width: 100%;
position: absolute; /* 使用 z-index 调整上下层级需要脱离文档流 */
top: 0;
z-index: -100; /* z-index 设低一点,让页面元素可以覆盖它 */
}
.videoBanner {
padding: 20rpx 25rpx 0 25rpx;
margin-top: 295rpx; /* 有一点叠加在图片上面 => 295 + 20 = 315rpx(背景图片 750*371 的比例,即有 371 - 315 = 56rpx 的重叠)*/
}
存在一个小问题:首页比较长,要滚动时,微信自带的“胶囊”会一直在页面的右上角,跟随页面移动,可能会有点丑