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

最新推荐文章于 2024-05-08 00:36:16 发布
最新推荐文章于 2024-05-08 00:36:16 发布
阅读量3.2k 收藏 8
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46553543/article/details/106241025
版权

1.json 里面先设置下你要自定义头部

在这里插入图片描述

2.第二部直接wxml里面放代码
在这里插入图片描述
3.完工
在这里插入图片描述
简单的一比 ,导航栏有文字的话 就得需要计算高度啦。。有点虎奥

阿花爱吃小鱼干
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
小程序 自定义单页面头部导航栏（标题栏）
ITLISHUANG的博客
07-11 1万+
写在前：自定义头部标题栏，并封装引用到需要的页面。 实现单页面可用自定义头部（未封装） 首先：根据小程序文档顶配置项 在需要自定义的页面的json文件中添加下面的配置 { "navigationStyle": "custom" } 其次：为适配各手机顶部状态栏高度高度不同，动态获取高度并存放在全局变量中（放到app.js中） App({ onLaunch: functio...
微信小程序端自定义头部导航栏
L_Augety的博客
03-09 691
微信小程序自定义导航栏以及手机号的部分显示和隐藏
微信小程序设置单个页面自定义头部为背景图
cimbala的博客
05-16 4227
文章目录第一步：挑选好需要显示的图片。第二步：在`pages.json`文件中添加`navigationStyle`样式。第三步：编写`.vue`文件效果图 第一步：挑选好需要显示的图片。   裁剪好尺寸，存放在static目录下。 第二步：在pages.json文件中添加navigationStyle样式。   想要在哪个页面自定义头部背景图就在pages页面节点下设置navigationStyle样式。 "navigationStyle":"custom", 第三步：编写.vue文件 <vi
商家制作微信小程序有什么好处？微信小程序的制作有哪些步骤和流程
最新发布
cs57456376的博客
05-08 745
微信小程序是微信平台内的子应用。它们像应用程序一样运行，但无需下载或安装。用户可以通过微信界面直接访问这些小程序。截至2023年，微信拥有超过十亿的活跃用户，为企业提供了庞大的受众群体。
微信小程序个人中心-我的界面.zip
04-27
每个小程序基本上都会使用到，里面可以设置保存每个用户的数据和操作习惯等等，界面也很美观，看起来很舒服，希望大家能够喜欢
微信小程序界面设计-样式入门到精通
01-10
讲解微信小程序中样式的入门使用，如何使用传统的css知识点来开发wxss的样式
小程序中自定义头部标题栏
coldriversnow的专栏
04-06 5377
小程序最开始只能全局定义头部标题栏，也就是说一旦你想某个页面自定义头部标题栏，那么所有的页面都需要重新定义（也就是所有页面都需要重写头部标题栏）； 但现在新版本的微信已经开放了可以单页面自定义头部标题栏（很舒服） 只需在你想自定义的页面的.json下更改一下配置就可（我的是index.json页面） 然后需要在app.js中动态获取标题栏的高度（是为了解决iPhone X这种刘海屏的影响） // 头部的自定义的高度 statusBarHeight: wx.getSystemInfoSync
用uni-app开发自定义微信小程序头部导航
weixin_40858306的博客
08-02 1万+
由于公司需要，学习了uni-app开发小程序，目前了解不多，主要是以微信小程序为主。 uni-app官网：https://uniapp.dcloud.io/ 微信小程序开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ 官方介绍uni-app: uni-app是一个使用Vue.js开发所有前端应用的框架，开...
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
10-16
本篇文章将详细介绍如何实现微信小程序自定义头部导航栏和导航栏背景图片，以及处理与`navigationStyle`相关的技术问题。 首先，微信小程序提供了`navigationStyle`属性，允许开发者禁用默认的导航栏并自定义样式。...
微信小程序自定义头部标题导航栏
05-24
* bgColor: 导航栏背景颜色，默认透明'transparent' * noSticky: 取消导航栏粘性布局(不占头部导航栏位置)，默认不取消 * opacity: 导航栏透明度，默认1不透明 * showNavBtn: 是否显示左侧导航按钮，默认true...
微信小程序实现拍照界面自定义实现
03-29
在微信小程序中实现自定义拍照功能主要使用到如下的组件和API 1：camera组件 常见的属性有: (1)：mode 应用模式，只在初始化时有效，不能动态变更，参数有：normal(相机模式),scanCode(扫码模式) ，默认为normal (2)...
微信小程序 自定义头部导航栏 navigationStyle
08-03
&平板设备，在某些时候，不想要自带的顶部导航栏，需要自己定义，这时可以将自定义的导航栏做成一个组件，然后做一下初始配置，在每个页面引用，初始化，即可得到一个自定义的顶部导航栏，即可在当前页面自定义左右...
微信小程序自定义头部导航nav
张营的技术博客
12-17 2975
自定义微信小程序头部nav导航，可以自定义标题、返回按钮、颜色、背景图等。
微信小程序实现自定义头部导航栏（详细）
我们好像在哪见过
11-04 1666
整体高度：状态栏高度+胶囊高度+(胶囊距离-胶囊高度）*2
小程序：自定义头部
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
03-11 2554
小程序自定义头部封装
小程序自定义头部
99的博客
04-03 1万+
相关头部设置 小程序全局配：小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。 页面配置：每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。 由于自定义头部为白色时，状态栏时间、电量等需要设置为黑色。 微信版本7.0.0以上支持单个页面进行头部配置，6.6...
[微信小程序]动画,从顶部掉花的效果(完整代码附效果图)
热门推荐
a_靖的博客
11-24 1万+
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： image{ width: 100rpx; height: 100rpx; position: absolute; top: -100rpx; } 如果对您有帮助，请关注我，欢迎加入微信小程序开发交流QQ群（173683866），有问题可以加群问我获取问群里的大神！...
小程序背景图固定以及标题栏遮挡内容滚动时显示内容
weixin_47077075的博客
04-07 1523
滚动页面时背景图固定： 采用一张图片作为背景图，通过设置position为fixed以及z-index为-1，目的是为了让它在最底层 <!-- 背景图 --> <view> <image class="bg-image" mode="scaleToFill" src="/img/bg2.png"></image> </view> .bg-image { width: 100%; height: 100%; posi
微信小程序顶部渐变色实现
小帅丶的专栏
09-24 8686
源码地址 https://gitee.com/xshuai/easydlsmartappdemo/tree/master/pages/demo 先看一下效果图 linear-gradient()简介 linear-gradient() 函数用于创建一个线性渐变的 "图像"。 为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色...
微信小程序自定义头部背景图导航栏
12-30
在微信小程序中，可以通过设置navigationStyle字段为custom来实现自定义头部背景图导航栏。具体步骤如下： 1. 在app.json文件中，找到window字段，并将navigationStyle字段设置为custom，如下所示： ```json ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值