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

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

浏览量:534 时间: 来源:祈澈菇凉

官方文档: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后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所思所见,对于博客上面有不会的问题,可以加入qq群聊来问我:473819131.

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎