置顶微信小程序导航条配置图片背景精选热门

2021-09-01

4877浏览

0评论

实现小程序通栏背景

微条配置图片背景

需要实现通栏背景的效果（导航那里还有背景图片）

全部页面替换

如果自定义导航栏，会存在需要考虑的问题

如果有上一页，就返回上一页，否则直接返回首页（首页），图标也要跟着换
标题取配置里的（如果可以的话，否则就用组件传参，去掉配置里的，以免造成误解）
- 背景图片拼接（首页的时候）

就首页特殊，其他页面纯色导航条（沿用微信那套）

网上搜索的方案是自定义导航栏，都是在全局设置了 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 的重叠）*/
}