小程序头部导航条设置图片

最新推荐文章于 2024-01-26 09:02:05 发布
最新推荐文章于 2024-01-26 09:02:05 发布
阅读量2.6k 收藏 4
点赞数 2
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chaosama/article/details/102622866
版权

先看效果吧

然后到需要的页面的.json文件配置

"navigationStyle":"custom"

不要在app.json设置，否则你会发现全部页面的上导航都不见了，底下的view会顶上屏幕顶部，这时候获取头部高度

 wx.getSystemInfo({
      success: res => {
        height = res.statusBarHeight
      }
    })

把height设置为你的图片高度就行了

chaosama
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序顶部标题栏的背景图片设置
weixin_44514665的博客
12-03 2万+
实际运行结果为： 实现步骤 知识点讲解： 修改 navigationStyle 字段，关于这个属性，以下是官方解释： 在uniapp中 使用微信小程序开发工具开发小程序时：官方解释 操作： 此处我修改的页面是首页index.vue，我需要index的导航部分为图片背景。 所以,以下就以index.vue为例。 修改导航栏为自定义导航栏样式 修改需要配背景图片的页面路由的属性值，此...
微信小程序设置背景图铺满顶部
weixin_56733569的博客
03-02 5673
微信小程序设置背景图将顶部铺满
微信小程序设置单个页面自定义头部为背景图
cimbala的博客
05-16 4264
文章目录第一步：挑选好需要显示的图片。第二步：在`pages.json`文件中添加`navigationStyle`样式。第三步：编写`.vue`文件效果图 第一步：挑选好需要显示的图片。   裁剪好尺寸，存放在static目录下。 第二步：在pages.json文件中添加navigationStyle样式。   想要在哪个页面自定义头部背景图就在pages页面节点下设置navigationStyle样式。 "navigationStyle":"custom", 第三步：编写.vue文件 <vi
uniapp小程序中的导航如何设置图片 自定义导航栏 +页面跳转+页面回退
ll123456789_的博客
06-14 7100
要让中的背景图片全屏，可以在标签中添加以下样式：page {在这个样式中，background-image属性设置背景图片的URL，background-size属性设置背景图片的尺寸，background-repeat属性设置是否重复背景图片，background-position属性设置背景图片的位置。通过设置background-size: cover;，让背景图片充满整个屏幕。注意，在设置背景图片之前，要确保在你的项目静态资源文件夹中有这个图片。
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
10-16
主要介绍了微信小程序 自定义头部导航栏和导航栏背景图片 navigationStyle功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
微信小程序自定义渐变顶部导航条.rar
08-28
在微信小程序开发中，自定义导航条是一种常见的需求，它能提供更加个性化和独特的用户体验。本教程主要聚焦于如何利用微信小程序的特性实现自定义渐变顶部导航条，并且涵盖自定义返回键的实现方法。 首先，我们需要...
猫眼电影底部标签导航-微信小程序
08-22
1. 猫眼电影底部标签导航微信小程序源码 1.1猫眼电影底部标签导航分为4个标签导航：电影、影院、发现、我的 ...1.4 在该小程序的公共设置App.json文件的导航标签tabBar下分别设置4个导航，并设置导航栏属性
微信小程序自定义导航隐藏和显示功能
12-29
在微信小程序中实现思路是：在逻辑层定义变量，通过setData赋值。 方法一：通过变量直接赋值，给每一个要控制显示的view定义变量 .wxml 代码： <!--index.wxml--> 视图容器 <view class=classname
微信小程序使用自定义组件导航实现当前页面高亮
10-15
在微信小程序中，实现当前页面高亮导航通常是为了提升用户体验，让用户清楚地知道当前所在的位置。本案例通过创建自定义组件来实现这一功能，以下是详细的知识点解析： 1. **自定义组件的创建**： - 首先，创建一...
小程序中自定义头部标题栏
coldriversnow的专栏
04-06 5473
小程序最开始只能全局定义头部标题栏，也就是说一旦你想某个页面自定义头部标题栏，那么所有的页面都需要重新定义（也就是所有页面都需要重写头部标题栏）； 但现在新版本的微信已经开放了可以单页面自定义头部标题栏（很舒服） 只需在你想自定义的页面的.json下更改一下配置就可（我的是index.json页面） 然后需要在app.js中动态获取标题栏的高度（是为了解决iPhone X这种刘海屏的影响） // 头部的自定义的高度 statusBarHeight: wx.getSystemInfoSync
小程序自定义顶部（可以是图片或标题），带返回箭头和回到首页
01-02
小程序自定义顶部（可以是图片或标题），带返回箭头和回到首页。template是引用的列子。可以直接复制使用！
uni-app中原生头部导航栏图标的添加
06-20 1103
uni-app是一个使用Vue.js开发跨平台应用的前端框架。开发者通过编写Vue.js代码，uni-app将其编译到iOS、Android、微信小程序等多个平台，保证其正常运行并达到优秀体验。 记录一下更换顶部导航栏的流程 在page.json里的配置项 更换图标 1.在阿里巴巴的图标库中选择需要的图标，点击加入收藏 ...
html有背景图片的导航栏,微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题...
weixin_39673601的博客
06-09 721
这两天因为要做一个带背景的小程序头，哭了，小程序导航栏有背景也就算了，还得让导航栏上的背景顺下来，心态小崩。现在可以单独设置一个页面的小程序头了，但是前提是要微信7.0以上的版本，考虑到兼容性问题，还是不要贸然的上了，所以用老版本的替换所有页面的小程序头来做。​ 参考了其他篇的文章,但是没有解决自定义背景的和返回按钮的颜色的问题，还有因为IOS的橡皮筋效果，对IOS端不太友好，屏幕会乱划。所以针对...
小程序的自定义头，左上角显示图标
sinat_35082096的博客
05-13 3139
根据ui设计的需求，小程序的导航头部需要显示logo 需要显示的页面json文件设置 "usingComponents": { "no-data":"../../components/no-data/no-data" }, "navigationBarTitleText":"首页", "enablePullDownRefresh": true , "navigationStyle":"custom" } .wxml 文件的设置 <view style="z-inde
微信小程序实现原生导航栏和自定义头部导航栏
花铛
10-28 9989
因为不同的手机型号头部导航栏高度可能不一致，所以为了适配更多型号，需要动态计算导航栏的高度。状态栏的高度可以通过获取。胶囊按钮的信息可以通过获取。所以导航栏高度=状态栏高度+胶囊按钮的高度+（胶囊按钮距离顶部的距离-状态栏的高度）*2。由于胶囊按钮是原生组件，为表现一致，其单位在各个系统都为 px，所以自定义导航栏高度的单位都必须是 px，才能完美适配。
微信小程序自定义头部胶囊导航栏
caoyuna1998的博客
03-05 1127
　　 引入自定义头部文件 效果展示 在app.js文件的 onshow 里加 // 自定义导航栏 let menuButtonObject = wx.getMenuButtonBoundingClientRect(); wx.getSystemInfo({ success: res => { let statusBarHeight = res.statusBarHeight,...
微信小程序 自定义头部导航栏
weixin_48145150的博客
05-10 547
业务需求： ui设计的头部，右边多了一个首页的按钮，效果图 因为基本每个页面都要用得到，所有要做一个自定义的组件，直接上代码 wxml: <view class="nav-bar" style="padding-top:{{ phoneInfo.safeArea.top}}px;"> <view class="van-nav-bar" style="height: {{phoneInfo.safeArea.top}}px;"> <view
总结-微信小程序自定义顶部导航(超详细)附加效果图
热门推荐
easttour的博客
10-25 1万+
一、在需要设置头部导航栏的页面中通过json配置 "navigationStyle":"custom" ，自定义导航栏，只保留胶囊按钮，效果如下： 二、做完上面的步骤，基本上就可以自定义导航栏了，当然，这还没完，从页面上可以看出，页面里的内容被挡住了，可以通过页面样式加上内边距内容就出来了： 三、可以看出这个内边距是固定死了的，不同的手机型号头部那条栏目高度可能不一致，所以为了我们适配更多型号，我们需要计算3个值： 1. 整个导航栏的高度； 2. 胶囊按钮与顶部的距离； 3...
微信小程序将导航栏改为自定义图片
最新发布
weixin_43638614的博客
01-26 769
【代码】微信小程序将导航栏改为自定义图片。
微信小程序头部自定义导航栏
05-10
微信小程序中可以通过自定义导航栏实现更加个性化的界面设计。以下是一个简单的实现步骤： 1. 在 app.json 文件中设置 "navigationStyle": "custom"，表示使用自定义导航栏。 2. 在页面的 WXML 文件中编写自定义...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值