微信小程序实例：自定义导航栏的实现方法

微信小程序|小程序开发

微信小程序

微信小程序-小程序开发

schoolin 源码,vscode命令面板在哪里,ubuntu安装cgl,tomcat 访问目录权限,爬虫 草榴,php 内置库,永泰效果好的seo优化,个人店铺网站源码,手机端威客平台网站模板lzw

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

asp 表格控件源码,ubuntu安装讯飞,Tomcat7各个版本,墙面黑色爬虫,php主要特征是,seo瓶颈lzw

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

二维码网页源码,vscode快速对齐代码,ubuntu 打开vnc,tomcat放到中文目录,nojs 爬虫,域名交易 php,代发广告推广seo博客,业务网站源码无后台,动态特效网页模板lzw

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

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

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

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

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

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

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

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

注意：navigationStyle 只在 app.json 中生效。开启 custom 后，低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0（不代表最低版本，只供调试用）可方便切到旧视觉 .

就是说这个属性只能在app.json里面配置 , 如果你想在单个page里面自定义导航栏是不行的 , 必须是所有的page都要自定义导航栏 , 个人觉得这是比较坑的 , 可能小程序以后会优化吧 .

小程序实例：小程序分页加载数据的实现代码

微信小程序实例：点击事件和长按事件的代码实现

小程序中button以及滚动条默认样式如何清除（代码）