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

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

2021-08-30 399
下载不了?请联系网站客服提交链接错误!
增值服务:
微信小程序–实现通栏背景图
最近更新 2021年08月30日
资源编号 105621

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

2021-08-30 小程序教程 0 399 百度已收录
限时活动VIP只需20元
增值服务:
¥ 0 钻石 开通VIP尊享优惠特权
立即下载 升级会员
详情介绍

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

全部页面替换

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

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

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

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

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

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

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

资源下载此资源仅限注册用户下载,请先

1、本站赞助VIP,仅需【128】元即可 ! ! ! (赞助后永久享受整站资源全部免费下载)
2、站内资源均可通过签到等任务进行免费兑换。(鼓励大家签到)
3、站内资源均来源于网络公开发表文件或网友投稿发布,如侵犯您的权益,请联系管理员处理。
4、本站所分享的源码、模板、软件工具等其他资源,都不包含技术服务,请大家谅解!
5、所有资源均收集于互联网仅供学习、参考和研究,请理解这个概念,所以不能保证每个细节都符合你的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所以不支持任何理由的退款兑现(特殊情况可退积分),请熟知后再赞助下载!收取的费用只为能长期与大家分享学习,本站为非商业性网站,纯属个人爱好!

K4资源 小程序教程 微信小程序–实现通栏背景图 https://www.k4sc.com/105621.html

下一篇:

已经没有下一篇了!

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务