小程序设置单个页面的头部自定义

最新推荐文章于 2024-09-29 18:25:44 发布

原创最新推荐文章于 2024-09-29 18:25:44 发布 · 3.8k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何在微信小程序中自定义页面的导航样式。通过在.json配置文件中添加navigationStyle:custom代码，开发者可以实现个性化的导航效果。详细配置方法及更多选项，请参考微信官方文档。

直接在你想要自定义的.json里加入下面代码

"navigationStyle":"custom"

具体的请查看https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

HXH_csdn

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序自定义头部导航栏

YaWen的博客

07-02

6326

沉浸式导航头要用自定义的导航栏首先需要将页面设置成沉浸式导航，在该页面的json文件中配置navigationStyle，如果是所有页面都需要沉浸式，则在app.json中设置 { "navigationBarTitleText": "测试", "navigationStyle": "custom" // 沉浸式导航头 } 创建组件目录 navigationBar.wxml文件： <view class='nav-wrap' style='top: {{top}}rpx; heigh

小程序自定义头部

99的博客

04-03

1万+

参与评论您还未登录，请先登录后发表或查看评论

微信小程序自定义头部导航

01-09

背景图片、背景颜色、返回按钮、返回首页。附带模板，可直接使用！

小程序 自定义单页面头部导航栏（标题栏）

ITLISHUANG的博客

07-11

1万+

写在前：自定义头部标题栏，并封装引用到需要的页面。实现单页面可用自定义头部（未封装）首先：根据小程序文档顶配置项在需要自定义的页面的json文件中添加下面的配置 { "navigationStyle": "custom" } 其次：为适配各手机顶部状态栏高度高度不同，动态获取高度并存放在全局变量中（放到app.js中） App({ onLaunch: functio...

自定义小程序头部

Madman528的博客

02-22

753

一般情况系下是默认的，先去把头部风格设为自定义 因为这个头很多地方都用到，所以封装一下他 <template> <view class="head"> <view class="icon" v-if="icon"> <text class="iconfont iconzuojiantou-copy" @tap="handletoBack"></text> | ...

小程序自定义单页面、全局导航栏的实现代码

11-29

需求产品说小程序返回到首页不太方便，想添加返回首页按钮，UI说导航栏能不能设置背景图片，因为那样设计挺好看的。需求分析并制定方案这产品和UI都提需求了，咱也不能反驳哈，所以开始调研，分析可行性方案；1、可以添加悬浮按钮。2、自定义导航栏。添加悬浮按钮，是看起来是比较简单哈，但是感觉不太优雅，会占据页面的空间，体验也不太好。所以想了下第二种方案，自定义导航栏既可以实现产品的需求还可以满足UI的设计美感，在顶部空白处加上返回首页的按钮，这样和返回按钮还对称（最终如图所示，顶部导航栏是个背景图片，分两块组合起来）。实现方案一、实现的前提 1、首先查看文档，看文档里关于自定义导航栏是怎么

小程序自定义头部组件

xiaoququ的博客

06-30

7474

在app.js中动态获取顶部高度 /* eslint-disable no-unused-vars */ import { wxp, http } from './utils/index' import { store } from './store/index' import log from './utils/log' App({ onLaunch(options) { // 导航栏总高度 = 胶囊按钮高度 + 状态栏到胶囊按钮间距 * 2 + 状态栏高度 // iOS 胶囊按钮.

小程序自定义顶部（可以是图片或标题），带返回箭头和回到首页

01-02

1. **自定义导航栏**：微信小程序提供了原生的`navigationBar`配置，允许开发者在`app.json`或单个页面的`json`配置文件中设置导航栏的颜色、标题、背景等属性。但为了更灵活地展示图片或者自定义更多的交互，我们...

自定义头部布局

Android_ElitePerson的博客

06-10

847

package com.example.administrator.simulation_weekone; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Color; import android.os.Build; import android.sup...

微信小程序自定义头部

我是小鹏呀的博客

05-22

1582

由于胶囊按钮是原生组件，为表现一致，其单位在各个系统都为 px，所以自定义导航栏高度的单位都必须是 px，才能完美适配。胶囊按钮的信息可以通过 wx.getMenuButtonBoundingClientRect() 获取。导航栏高度=状态栏高度+胶囊按钮的高度+（胶囊按钮距离顶部的距离-状态栏的高度）*2。2. 状态栏的高度可以通过 wx.getSystemInfo() 获取。该页面自定义头部，也支持分享好友，导致分享出去点左上角的返回没有反应。

自定义头部的下拉刷新

xiaoshitounan的博客

02-13

378

在gradle中 buildscript { repositories { jcenter() mavenCentral() maven { url 'https://oss.sonatype.org/content/repositories/snapshots' } } dependen

小程序中自定义头部标题栏

coldriversnow的专栏

04-06

7131

小程序最开始只能全局定义头部标题栏，也就是说一旦你想某个页面自定义头部标题栏，那么所有的页面都需要重新定义（也就是所有页面都需要重写头部标题栏）；但现在新版本的微信已经开放了可以单页面自定义头部标题栏（很舒服）只需在你想自定义的页面的.json下更改一下配置就可（我的是index.json页面）然后需要在app.js中动态获取标题栏的高度（是为了解决iPhone X这种刘海屏的影响） // 头部的自定义的高度 statusBarHeight: wx.getSystemInfoSync

微信小程序自定义头部标题导航栏

夏夜追凉丶的博客

10-25

9839

微信小程序自定义头部标题导航栏，可透明，可渐变色，可自定义导航icon与触发事件，随机型动态调整高度，适配全机型

微信小程序自定义头部导航栏，实现左上角返回键和功能键组件 navigationStyle

allenyll的博客

12-14

1万+

自定义左上角返回键和功能键组件，需要将app.json中的widow下navigationStyle属性设置为custom，但是设置该值之后，需要在每个页面都引入自定义的组件 "window": { "navigationStyle": "custom" }, 自定义组件目录 index.wxml文件 <view class="navbar custom-class" style='height:{{navHeight}}px;background-color:{{bgCo

uniapp小程序自定义头部(简单)

前端必备小窝

09-29

1376

uniapp项目小程序中难免会有一些页面需要自定义头部导航区域，因为原生的头部太简陋了，本文记录下uniapp自定义小程序的头部导航。

微信小程序设置单个页面自定义头部为背景图

cimbala的博客

05-16

4922

文章目录第一步：挑选好需要显示的图片。第二步：在`pages.json`文件中添加`navigationStyle`样式。第三步：编写`.vue`文件效果图第一步：挑选好需要显示的图片。裁剪好尺寸，存放在static目录下。第二步：在pages.json文件中添加navigationStyle样式。想要在哪个页面自定义头部背景图就在pages页面节点下设置navigationStyle样式。 "navigationStyle":"custom", 第三步：编写.vue文件 <vi

【小程序】单页面自定义头部标题以及图标+文字同行【代码练习】

Milk~每天分享一点点，技术进步一点点

08-14

785

先看效果：代码如下：文件目录：pages/goodsOrder 单页面自定义头部标题 index.json { "navigationBarTitleText": "商品订单" } 图标+文字同行 index.wxml  <view class="orderHeader"> <view class=""> <text class

小程序自定义头部导航栏(“navigationStyle“: “custom“)，自定义tabBar

最新发布

07-16

在使用 Taro 框架结合 Vue 开发小程序时，自定义头部样式是一个常见的需求。Taro 提供了对小程序多端兼容的支持，而 Vue 作为框架则提供了组件化的开发方式，使得自定义头部的实现更加灵活和高效。 ### 自定义头部的基本思路 1. **禁用默认导航栏** 小程序默认会显示一个原生的导航栏（包括状态栏和标题栏），但在很多情况下开发者希望完全自定义头部样式。可以通过配置页面 `app.json` 或者单个页面的 `config` 属性来关闭默认导航栏： ```json { "navigationStyle": "custom" } ``` 这样可以隐藏默认的导航栏，从而为自定义头部留出空间[^1]。 2. **获取系统信息** 自定义头部需要适配不同设备的状态栏高度、屏幕宽度等参数。可以通过 `Taro.getSystemInfoSync()` 获取设备信息： ```javascript const systemInfo = Taro.getSystemInfoSync(); const statusBarHeight = systemInfo.statusBarHeight; const windowWidth = systemInfo.windowWidth; ``` 这些信息可以帮助计算自定义头部的高度和布局位置。 3. **获取胶囊按钮的位置（仅部分平台支持）** 对于微信小程序等平台，可以通过 `Taro.getMenuButtonBoundingClientRect()` 获取右上角胶囊按钮的位置信息，从而更精确地控制自定义导航栏的高度： ```javascript const menuButtonInfo = Taro.getMenuButtonBoundingClientRect(); const navBarHeight = (menuButtonInfo.bottom - systemInfo.statusBarHeight) + (menuButtonInfo.top - systemInfo.statusBarHeight); ``` 这样可以确保自定义头部与胶囊按钮保持合适的间距[^1]。 4. **在 Vue 组件中动态绑定样式** 在 Vue 的模板中，可以将上述计算的值通过数据绑定到组件的样式中： ```vue <template> <view class="custom-header" :style="{ height: navBarHeight + 'px' }"> <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view> <view class="title">自定义标题</view> </view> </template> <script> export default { data() { return { statusBarHeight: 0, navBarHeight: 0 }; }, mounted() { const systemInfo = Taro.getSystemInfoSync(); this.statusBarHeight = systemInfo.statusBarHeight; const menuButtonInfo = Taro.getMenuButtonBoundingClientRect(); this.navBarHeight = (menuButtonInfo.bottom - systemInfo.statusBarHeight) + (menuButtonInfo.top - systemInfo.statusBarHeight); } }; </script> <style> .custom-header { display: flex; flex-direction: column; justify-content: flex-end; background-color: #ffffff; } .status-bar { background-color: transparent; } .title { font-size: 16px; padding-bottom: 8px; text-align: center; } </style> ``` 5. **适配多端差异** 不同的小程序平台（如微信、支付宝、H5 等）在自定义导航栏的实现上可能有所不同。例如，在 H5 和 App 中，某些 API 可能不可用，因此需要通过条件编译或运行时判断来处理差异： ```javascript // 条件编译示例 // #ifdef MP-WEIXIN const menuButtonInfo = Taro.getMenuButtonBoundingClientRect(); // #endif ``` 6. **优化用户体验** 自定义头部不仅需要视觉上的美观，还需要考虑交互体验。例如，添加返回按钮、搜索框等功能元素时，应确保它们在不同设备上的可点击区域合适，并避免遮挡状态栏内容。 --- ###