微信小程序学习笔记-标题栏自定义

最新推荐文章于 2023-11-04 00:39:35 发布
最新推荐文章于 2023-11-04 00:39:35 发布
阅读量451 收藏
点赞数
分类专栏： 小程序学习笔记 文章标签： 前端 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linchui22/article/details/114257972
版权

小程序的标题栏一般都是文字，但是有时候对于标题，有特殊的需求，这时候就要使用自定义导航栏样式：
在展示页的目录下(test.wxml)新建test.json用于替换app.json中的全局配置添加以下属性（开启自定义标题功能）：
在这里插入图片描述

"navigationStyle": "custom"

开启以后只保留微信的右上角的两个按钮，你在页面中的元素会填充到页面顶部
在这里插入图片描述
在这里插入图片描述

木玄客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于canvas 2D实现微信小程序自定义组件-环形进度条
08-12
最近开发一款背单词的微信小程序，计划使用环形进度条展示每日背单词进度。 讲解博文：...
微信小程序自定义头部标题导航栏
05-24
* show: 显示导航标题栏，默认显示 * title: 导航栏标题 * bgColor: 导航栏背景颜色，默认透明'transparent' * noSticky: 取消导航栏粘性布局(不占头部导航栏位置)，默认不取消 * opacity: 导航栏透明度，默认1...
微信小程序 自定义标题栏
coldriversnow的专栏
04-01 8962
微信小程序可以设置自定义标题栏，可以针对不同页面单独设置 1.在页面文件.json文件中，设置如下属性，自定义导航栏和导航栏样式"navigationStyle":"custom","navigationBarTextStyle":"white", 　　特别是第二个navigationBarTextStyle属性可以将胶囊样式调整为透明效果 2.设置自定义导航栏布局样式动效逻辑等 3.划重点！！！导航栏中状态栏高度导航栏高度胶囊高度，需要得知这三个属性进行布局+兼容 　　...
微信小程序："navigationStyle":"custom"
热门推荐
oopxiajun博客专栏
05-06 2万+
参考：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html 今天折腾了半天这个"navigationStyle":"custom"，让小程序顶部栏自定样式。 第一个问题：是整个小程序全局都自定义吗？还是部分页面自定义（单独某一个页面自定）？ 全局都自定义请在app.json的...
小程序页面使用“navigationStyle“:“custom“之后手动加标题的方法（判断机型）
_小郑有点困了的博客
11-27 1506
小程序页面使用"navigationStyle":"custom"之后手动加标题的方法 手动定位上去 下面这个方法可以获取状态栏高度和导航栏高度以及机型 uni.getSystemInfo({ success: (e) => { let statusBar = 0 // statusBar ---------- 状态栏高度 let navBar = 0 // statusBar ---------- 状态栏高度 let customB
小程序自定义tabbar—让你的小程序与众不同
weixin_57681196的博客
06-27 7148
本篇文章将详细介绍微信小程序自定义tabbar的设置方法和注意事项，希望能够帮助广大开发者更好地开发和设计自己的微信小程序，实现更加个性化和独特的用户体验。目录前言一、自定义tabbar设置的重要性二、怎么设置自定义tabbar呢第一步，配置信息第二步，添加tabBar代码文件第三步，编写tabBar代码第四步，使用tabBar三、注意事项🔥 发本文章由猿梦_小星原创📢 本文章主旨——讲解微信小程序自定义tabbar的设置方法和注意事项一、自定义tabbar设置的重要性。
微信小程序自定义顶部导航栏
实习打字猿的博客
08-21 6385
微信小程序自定义顶部导航栏
微信小程序实现自定义头部导航栏（详细）
我们好像在哪见过
11-04 1620
整体高度：状态栏高度+胶囊高度+(胶囊距离-胶囊高度）*2
微信小程序源码 IT-EBOOK(学习版)
06-18
微信小程序源码 IT-EBOOK(学习版)微信小程序源码 IT-EBOOK(学习版)微信小程序源码 IT-EBOOK(学习版)微信小程序源码 IT-EBOOK(学习版)微信小程序源码 IT-EBOOK(学习版)微信小程序源码 IT-EBOOK(学习版)微信小程序源码...
微信小程序 自定义组件 - 弹出菜单demo
03-29
我也很困惑这件事，今天了解到自定义组件这个概念，就试了试，感觉好像弥补了template的那个缺点，于是写了个小demo，也算做个笔记 我觉得 如果不需要传参，也不需要向外发送事件的，可以用include，相当于直接把...
微信小程序 自定义头部导航栏 navigationStyle
12-24
微信小程序 自定义头部导航栏 navigationStyle，修改微信小程序默认情况下只有返回的按钮，具体使用方法很简单，这里是直接使用组件方式，
【微信小程序创作之路】- 小程序窗口整体配置（导航栏、标题）
ProGram_Java521的博客
07-14 6045
本章主要介绍小程序窗口导航栏、窗口下拉、窗口上拉、标题等设置。以上就是今天要讲的内容，本文简单介绍了全局app.json文件中入口文件的配置、页面配置Pages、全局默认窗口配置window和底部tab栏配置tabBar使用，下一章我们将讲解小程序JS文件调用后端接口。
微信小程序 自定义导航栏navigationBar
油焖茄子 的博客
07-28 3807
除了胶囊按钮以外，原生导航栏只会出现返回按钮和当用户打开的小程序最底层页面是非首页时，默认展示的“返回首页”按钮。原生导航栏的标题文字的颜色只有黑白。布局无法改变，不能做定制。将需要自定义navigationBar页面的page.json的navigationBarTitleText去掉。加上"navigationStyle"："custom"，这样原生的导航栏就已经消失，甚至后退键也不会出现需要自定义。
微信小程序自定义navigationBar、自定义标题栏
weixin_46265708的博客
10-18 9778
自定义导航栏核心在于导航栏的高度定位，这样才能准确定位自定义的返回按钮以及其他按钮的位置，与原生胶囊保持一致。至于wxml的布局方法多种多样，上面只是列出了笔者的一种写法。学习小程序，自定义导航栏是很重要的技能，其间的逻辑并不复杂，还是和学习前端一样，需要非常细心耐心，才能做好细节工作wx.getSystemInfo()获取到的参数。
微信小程序自定义页面Title
weixin_40749372的博客
09-30 2464
小程序自定义页面顶部，title位置设置
微信小程序 自定义tabBar
tengyuxin的博客
08-01 7689
一、官方文档根据官方的案例，做了自己的案例测试，效果图如下二、在app.json里面添加tabBar配置配置完成后，不会出现tabBar，需要在custom-tab-bar这个微信小程序已经定义的文件夹，里面添加对应的路径配置。...
小程序导航栏透明，精准设置小程序自定义标题的高度和定位
zyf_baby的博客
11-07 4176
自定义标题栏、导航栏透明，自定义导航高度问题，微信小程序自定义标题栏，微信小程序自定义标题栏的高度和位置
小程序自定义标题栏————（2020.1.31学习笔记）
qq_37704442的博客
01-31 615
这次要实现的标题栏效果如下图 如图标题栏文字局左，而小程序默认标题栏文字是居中的，所以要实现这个效果必须使用自定义标题栏，那么，在使用自定义标题栏之前，我们必须在app.json进行配置，将原有的默认标题栏停用，转为使用自定义标题栏（配置代码如下） "window": { "navigationStyle":"custom", }, 在停用默认标题栏之后，原先...
【uni-app&小程序】状态栏和标题栏
joanmelon的博客
01-04 6393
Hi，我是宾果的救星~
微信小程序刷新ec-canva
最新发布
12-03
微信小程序的刷新指的是在页面中的ec-canva组件中更新数据。ec-canva是微信小程序中用于展示echarts图表的组件，可以通过刷新来实时更新图表的数据和样式。 首先，我们需要在小程序页面的json文件中引入ec-canva...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值