小程序顶部自定义导航栏添加背景图的实现

王小婷

发布于 2025-05-18 16:17:08

35700

代码可运行

文章被收录于专栏：编程微刊编程微刊

运行总次数：0

代码可运行

官方文档：navigationStyle 导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮)。

参考API：自定义导航栏

1：打开app.json,添加属性"navigationStyle":"custom", 这里的custom的意思，是指需要开发者自行设计定义顶栏的样式。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "navigationStyle":"custom",
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

2：wxml

 <image class='site-img' data-id="{{item.deviceId}}" src="../../img/nav.jpg" catchtap='navmap'></image>

3:加完之后可以看到

注意：如果自定义导航栏，页面自带的返回按钮也会消失，需要用代码编写

原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1 90后前端妹子，爱编程，爱运营，爱折腾。坚持总结工作中遇到的技术问题，坚持记录工作中所思所见，对于博客上面有不会的问题

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-05-16，如有侵权请联系 cloudcommunity@tencent.com 删除

小程序

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

小程序顶部自定义导航栏添加背景图的实现

小程序顶部自定义导航栏添加背景图的实现

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐