评论

微信小程序导航条配置图片背景

实现小程序通栏背景

微条配置图片背景

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

全部页面替换

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

  • 如果有上一页,就返回上一页,否则直接返回首页(首页),图标也要跟着换

  • 标题取配置里的(如果可以的话,否则就用组件传参,去掉配置里的,以免造成误解)

    • 背景图片拼接(首页的时候)

就首页特殊,其他页面纯色导航条(沿用微信那套)

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

存在一个小问题:首页比较长,要滚动时,微信自带的“胶囊”会一直在页面的右上角,跟随页面移动,可能会有点丑

最后一次编辑于  09-01  
点赞 1
收藏
评论
登录 后发表内容