支付宝小程序顶部透明导航栏配置

最新推荐文章于 2024-07-31 11:41:46 发布
最新推荐文章于 2024-07-31 11:41:46 发布
阅读量3.8k 收藏 5
点赞数
分类专栏： 小程序 前端 文章标签： 前端 经验分享 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/OxuanO/article/details/107548308
版权

文章目录

实现目标

最近在实现一个支付宝小程序，要实现首页部分tab和部分页面的顶部导航栏透明，不显示标题，使用背景图延伸到状态栏。如下图所示：在这里插入图片描述

错误做法

首先根据官方文档，可以在根目录下的app.json文件中配置window属性transparentTitle，来实现该效果，该属性有三个值：none默认值，表示导航栏一直显示，auto导航栏滑动自适应，always导航栏一直不显示，我们设置为一直不现实，配置如图：全局配置
配置内容如下：

{
   
  "pages": [
    "pages/tabBar/user/user"
最低0.47元/天 解锁文章
OxuanO
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序自定义顶部（可以是图片或标题），带返回箭头和回到首页
01-02
小程序自定义顶部（可以是图片或标题），带返回箭头和回到首页。template是引用的列子。可以直接复制使用！
支付宝小程序透明标题栏
hello world
09-06 3497
官方小程序标题栏的文档 小程序页面有的上面标题栏为透明的，效果如下图，背景是一张图片。 标题栏的文字颜色也无法直接修改，可以通过修改标题栏的背景色间接修改（字体颜色会随着背景色改变而改变），但好像只有两种颜色，白色和蓝色，也可能有其他的，我没试太多 在json中添加 "transparentTitle": "auto" 修改标题栏文字颜色 ，在js中 my.se...
支付宝小程序配置
qq_39652695的博客
03-10 1116
navigationBarBackgroundColor：设置背景颜色 navigationBarTextStyle：导航栏标题颜色，只支持 black 和 white （这个属性在支付宝小程序没有效果） transparentTitle：导航栏透明设置。默认 none，支持 always一直透明 / auto 滑动自适应 / none 不透明 allowsBounceVertical页面是否支持纵向拽拉超出实际内容（顶部是否可以出现实现下拉刷新或上拉加载效果）。默认 YES, 支持 YES / ..
【小程序】支付宝小程序自定义头部
wusq的博客
02-17 1922
支付宝小程序自定义头部 1.修改当前页面的main.json { "transparentTitle": "auto", "titlePenetrate":"YES" } transparentTitle： 标题栏透明设置，可选值： always一直透明； auto滑动自适应； none不透明，默认值。 titlePenetrate： 是否允许标题点击穿透，可选值： YES 允许； NO 不允许，默认值。 2.修改全局app.json的windows "window": { "transpa
支付宝小程序自定义状态栏，标题栏，标题栏文字。
weixin_43911938的博客
07-14 5336
1、app.json里面设置transparentTitle: 'none'，"titlePenetrate":"NO"设置全局标题栏不透明和标题栏不穿透属性。 "window": { "transparentTitle": "none" , "titlePenetrate":"NO", }, 2、在需要开启标题栏透明效果的页面单独设置一下page.json ，并且设置导航栏标题为空不显示原系统标题，需要标题栏穿透就设置标题栏穿透属性。 { "transparentTitle": "alw
uniapp头部透明配置
userFriends的博客
09-15 3835
uniapp顶部原生导航栏： 1.透明渐变样式 配置page.json { "path": "nav-transparent/nav-transparent", "style": { "navigationBarTitleText": "透明渐变导航栏", "transparentTitle": "auto", "navigationBarBackgroundColor":"#CCCCCC" } }, 页面
【uniapp】跨端开发问题记录
lorogy的博客
08-09 1148
uni-app跨端开发
微信小程序自定义导航栏navigationBar
weixin_43424672的博客
03-17 8448
这里使用三段论是什么为什么怎么做来阐述自定义navigationBar，如果只关心怎么做可直接跳至怎么做段落。 navigationBar是什么？ 微信小程序一般来说有两个bar，一个导航栏，一个tabbar（小程序下方一排切换按钮），实现下方自定义tabbar的方法一般来说较为简单，现在着重叙述上方自定义导航栏的实现。 小程序布局 谈到导航栏与自定义导航栏，就需要解释一下微信小程序的布...
uniapp关于支付宝小程序或钉钉小程序标题栏自定义.txt
12-30
### uniapp中支付宝小程序与钉钉小程序标题栏自定义详解 #### 一、背景介绍 在uniapp开发过程中，为了适应不同的小程序平台（如微信、支付宝、钉钉等），开发者经常需要对页面进行定制化处理，以满足不同平台的...
吸顶导航栏、吸顶导航栏.zip
05-11
在IT行业中，吸顶导航栏（Fixed Header）是一种常见的网页设计元素，它在用户滚动页面时始终保持在屏幕顶部，提供持续的导航功能。这种设计模式能够提升用户体验，因为用户无需滚动回页面顶部就能访问导航链接。现在...
仿支付宝导航菜单代码
04-01
在IT行业中，构建一个高效的、用户体验良好的导航菜单是至关重要的，尤其对于像支付宝这样的大型应用。这个名为"仿支付宝导航菜单代码"的项目提供了一种实现这一目标的方法，主要使用JavaScript语言来创建动态且交互...
高仿支付宝首页头部swift版
03-01
2. **自定义视图**：可能创建自定义UIView子类来构建支付宝头部的各个组件，如顶部滑动标签栏、可点击的图标等。这需要熟悉UIView的生命周期、触控事件处理以及自定义绘图。 3. **UICollectionView**：如果包含可...
小程序顶部导航栏navigationBar的相关设置
gyueh的博客
10-25 2087
小程序顶部导航栏的默认设置 "window": { "navigationBarBackgroundColor": "#ffffff", "navigationBarTitleText": "箱盟市场", "navigationBarTextStyle": "black", "backgroundColor": "#eeeeee", "back...
支付宝小程序导航栏隐藏及穿透
wilL-my的博客
04-23 3226
设置小程序标题栏透明介绍 //uniapp页面设置 "style": { "navigationBarTitleText": "", "enablePullDownRefresh": true, "navigationBarBackgroundColor": "#FFF", "navigationStyle": "custom", //微信 "transparentTitle": "always", //支付宝 "titlePenetrate": "YES" //支付宝 } ...
小程序(mpvue)设置navigationBarBackgroundColor 为透明的方法
qq_29407683的博客
09-05 5764
"navigationStyle": "custom",
微信小程序顶部（navigationBar）设置为透明
weixin_30719711的博客
03-20 2771
我记得在微信小程序中导航栏的颜色可以在app.json. window里面添加navigationBarBackgroundColor属性,但是颜色只能为纯色.不能使用rgb,或者rgba的色号. 但是今天做页面时，发现设计稿如下 但是我的页面如下： 这个顶部的navigationBar有点丑啊，搜了搜怎么解决，经过我一顿砸键盘终于找到了答案 结果： 　　在app.json里面...
微信小程序自定义顶部导航栏,添加背景图,透明色等
热门推荐
qq_23999487的博客
07-13 2万+
在微信小程序中，导航栏的颜色可以在app.json.  window里面添加navigationBarBackgroundColor属性,但是颜色只能为纯色.不能使用rgb,或者rgba的色号. 但是这样并不能满足很多人的要求.微信官方给出了一个属性,navigationStyle, (导航栏样式，仅支持 default/custom。custom模式可自定义导航栏，只保留右上角胶囊状的按钮),如...
前端Web-JavaScript(上)
最新发布
Yu2uki的博客
07-31 1315
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
uniap小程序顶部导航栏透明
05-23
要设置小程序顶部导航栏透明，可以通过以下步骤实现： 1. 在 app.json 文件中设置 navigationBarBackgroundColor 为 transparent，如下所示： ``` { "navigationBarBackgroundColor": "transparent", ... } ``` 2. 在相应页面的 json 文件中设置 navigationStyle 为 custom，如下所示： ``` { "navigationBarTitleText": "页面标题", "navigationStyle": "custom" } ``` 3. 在相应页面的 wxml 文件中添加一个自定义导航栏，如下所示： ``` <view class="custom-nav"> <view class="custom-nav-title">{{title}}</view> </view> ``` 其中，custom-nav 是自定义导航栏的样式类名，custom-nav-title 是导航栏标题的样式类名，title 是页面标题。 4. 在相应页面的 wxss 文件中设置自定义导航栏的样式，如下所示： ``` .custom-nav { position: fixed; top: 0; left: 0; width: 100%; height: 44rpx; background-color: rgba(0,0,0,0.5); color: #fff; font-size: 16px; text-align: center; line-height: 44rpx; z-index: 999; } ``` 其中，rgba(0,0,0,0.5) 表示背景色为半透明的黑色。通过设置透明度，可以实现小程序顶部导航栏透明的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值