189 8069 5689

微信小程序中怎么实现自定义导航栏-创新互联

小编给大家分享一下微信小程序中怎么实现自定义导航栏，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

10余年的明山网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同，自动调整明山建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“明山网站设计”,“明山网站推广”以来，每个客户项目都认真落实执行。

在微信小程序中，导航栏的颜色、文案一些属性可以在app.json中window里面设置 , 也可以在单个page里面设置 , 如果是在某一个page的json文件里面配置 , 需要去掉window , 例如在app.json配置:

{
    "window":{
       "backgroundTextStyle":"light",
       "navigationBarBackgroundColor": "#fff",
       "navigationBarTitleText": "WeChat",
       "navigationBarTextStyle":"black",
       "navigationStyle": "custom"
     } }

在某一个page的json文件配置:

{
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#405f80",
  "navigationBarTitleText": "文与字",
  "navigationBarTextStyle": "white"}

详细的可以参考官方文档 : https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

但有时候业务需要的导航栏比较特别 , 小程序的提供的导航栏不能满足需求 , 这时只能自定义了 .

先说一下自定义导航栏的步骤:

  • 在app.json里面的window增加”navigationStyle”: “custom”,属性(默认属性是”navigationStyle”: “default”) , 这时小程序默认的导航栏就会消失了 , 如图所示:
    微信小程序中怎么实现自定义导航栏

  • 接着就是根据自己的需要在每个page里面添加自己的导航栏 .

注意：navigationStyle 只在 app.json 中生效。开启 custom 后，低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0（不代表最低版本，只供调试用）可方便切到旧视觉 .
就是说这个属性只能在app.json里面配置 , 如果你想在单个page里面自定义导航栏是不行的 , 必须是所有的page都要自定义导航栏 , 个人觉得这是比较坑的 , 可能小程序以后会优化吧 .

看完了这篇文章，相信你对“微信小程序中怎么实现自定义导航栏”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！


当前名称：微信小程序中怎么实现自定义导航栏-创新互联
路径分享：http://cdxtjz.cn/article/dsjpdp.html

其他资讯