用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序--实现通栏背景图

Rolan 2021-8-30 00:55

小程序首页导航配置图片背景

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

全部页面替换

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

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

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

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

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

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

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


作者:suwanbin

版权:版权归作者所有,商业转载请联系原作者授权

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: suwanbin 来自: cnblogs