微信小程序中自定义导航栏实现方法实例剖析

GS 165 2024-08-02

本篇文章给大家带来的内容是关于微信小程序实例:自定义导航栏的实现方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

图片.png

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

图片.png

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

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

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

  • 在app.json里面的window增加”navigationStyle”: “custom”,属性(默认属性是”navigationStyle”: “default”) , 这时小程序默认的导航栏就会消失了 , 如图所示:
    图片.png

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

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

以上就是微信小程序中自定义导航栏实现方法的实例剖析的详细内容!


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:微信小程序中实现自定义日期控件的代码实例展示
下一篇:小程序中分页加载数据实现代码的实例展示
相关文章

 发表评论

暂时没有评论,来抢沙发吧~