【微信小程序实现自适应头部导航栏和uni-app实现自适应导航栏】

最新推荐文章于 2023-03-31 16:22:33 发布
最新推荐文章于 2023-03-31 16:22:33 发布
阅读量1.2k 收藏 1
点赞数
文章标签： javascript 小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/regretTAT/article/details/123651839
版权

①微信小程序实现自适应导航栏

首先先创建一个空项目模板，然后进入app.json中进行配置
建议封装为组件，哪个页面用直接引入就可以了、
哪个页面需要使用就在哪个页面设置navigationStyle为custom
然后引入封装的组件在这里插入图片描述
引入之后 在app.json中拿到需要用到的高度
在这里插入图片描述
在这里插入图片描述
先把数据存到全局变量App定义一个goblalData中
在组件中获取并计算结果在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
大功告成

uniApp自适应导航栏

在pages.json中开启自定义导航
在这里插入图片描述
创建组件引入组件
在这里插入图片描述

在onload中获取需要的高度，存在data中
在这里插入图片描述
通过父传子传到子组件
在这里插入图片描述

大功告成

灰太狼大王灬
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp 开发一个自定义顶部导航栏
树上骑个猴的博客
04-24 1227
效果图： 代码： <view class="uni_tab_bar"> <view class="order_top"> <block v-for="(tabBar,index) in tabBars" :key="index"> <view :class="{'active': tabIndex==tabBar.id}" @tap="toggleTab(tabBar.id)"> {{tabBar.name}}
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
10-16
本篇文章将详细介绍如何实现微信小程序自定义头部导航栏和导航栏背景图片，以及处理与`navigationStyle`相关的技术问题。 首先，微信小程序提供了`navigationStyle`属性，允许开发者禁用默认的导航栏并自定义样式。...
uni-app 5小时快速入门 16 uni-app样式与布局
谢谢你们的关注
08-25 1271
uni-app 5小时快速入门 16 uni-app样式与布局
uni-app自适应遇到的坑
热门推荐
weixin_44770377的博客
11-01 1万+
uni-app自适应遇到的坑 一、css中font不支持简写方式，这样的结果就是导致手机上运行项目，字体都变大了！把样式都挤变形了 如：font：bold 28rpx； 需改成如下非简写形式 font-size:28rpx; font-weight:bold; 二、css的height高度问题 用了rpx单位，结果还是不会自使用屏幕大小！长的手机下面会有空白，短的手机不会 解决方法： ...
uniapp开发微信小程序-3.页面制作、组件与轮播
最强的森的博客
04-18 1736
uniapp开发微信小程序-3.页面制作、组件与轮播 1.页面搭建 uniapp中页面的搭建与微信小程序雷同，都是div换成view即可。其他标签都与html相同： css的使用也相同。 做个首页： 2.将复用模块组件化 以banner为例。 （1）新建组件 在项目中新建文件夹component用于存放组件，在里边新建一个组件： 起名为banner，其中内容与普通页面一致： 接下来将banner的内容放到组件中： （2）引入组件 在项目主文件中引入该文件，并用Vue.component声明该文件为
uniapp发布微信小程序适应头部
qq_36893984的博客
03-31 1052
uni.getSystemInfo({ success: function(res) { console.log(res); //获取到的res的值 { SDKVersion: "2.9.2" //客户端基础库版本 batteryLevel: 100 // ...
微信小程序自定义头部标题导航栏
最新发布
05-24
* noSticky: 取消导航栏粘性布局(不占头部导航栏位置)，默认不取消 * opacity: 导航栏透明度，默认1不透明 * showNavBtn: 是否显示左侧导航按钮，默认true显示 * navIcon: 用户自定义导航按钮图标路径 * ...
基于uni-app开发的微信小程序商城项目
08-03
此项目是基于uni-app开发的微信小程序商城项目，开发工具用的是Hbuilder和微信开发者工具，前端用的vue3.0,后台的数据用的是用node搭建的本地服务器，通过内网穿透的方式进行数据外网访问的方式，只局限做开发和测试...
微信小程序实现左侧滑动导航栏
10-16
主要为大家详细介绍了微信小程序实现左侧滑动导航栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
uni-app微信小程序登录授权的实现
10-15
主要介绍了uni-app微信小程序登录授权的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
uniapp-自定义顶部导航栏
MMFerry的博客
02-26 8157
uniapp原生顶部导航栏 有时候不满足需求，就需要自定义顶部导航栏 1.在page.json中修改配置，在需要自定义导航栏的页面page配置中修改如下 //page.json { "path": "pages/projectDetail/index", "style": { "navigationStyle":"custom" //default是默认uniapp原生的顶部导航栏 } } 2.然后在该vue页面中就可以自定义导航栏样式了，根据自己的需求，也可以封装成组件多个
uni-app小程序如何自定义标题内容（如何解决小程序标题不居中）
daishu_shu的博客
03-29 9374
uni-app小程序如何自定义标题内容（如何解决小程序标题不居中）
uni-app 微信小程序导航栏navigationBar 安卓不居中问题
weixin_41012767的博客
03-03 1万+
直接去掉导航栏 在界面里自定义导航栏 在pages.json中style添加 "globalStyle": { "navigationBarTextStyle": "white", "navigationBarTitleText": "首页", "navigationBarBackgroundColor": "#000000", "backgroundColor": "#303133", // "app-plus": { // "background": "#303133"
uniapp开发微信小程序--自定义头部导航栏
weixin_42684860的博客
04-20 1974
1. 取消页面原生的导航栏（pages.json文件） 页面支持通过配置 navigationStyle为custom，或titleNView为false，来禁用原生导航栏 { "path": "pages/customer/project/index", "style": { "navigationBarTitleText": "服务", //小程序 "navigationStyle": "custom"， //App、H5 "app-plus": { "tit
uniapp小程序 设置自定义导航栏
Start2019
11-24 1万+
设置自定义导航栏，并带返回按钮
uniapp小程序自定义导航栏兼容
aliAjax的博客
03-31 248
小程序实现导航栏兼容机型
微信小程序自定义头部适配，不同机型高度--学习笔记
hellenYuan的博客
05-06 4724
微信小程序自定义头部学习笔记 首先看一下在不同机型上自定义头部高度效果（黄色部分）： 首先给需要自定义头部的页面文件夹下的json（index.json或xx.json）文件添加： 这一步的目的是把自定义的头部去掉，给我们自己写的头部腾出位置。 { "navigationStyle": "custom" // 将navigationStyle从默认default改为custom } in...
微信小程序自定义头部（navigationStyle）及手机适配
想飞的猪的博客
04-12 1万+
一、官方文档https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html -----页面配置中 avigationStyle导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮)。 在app.json window增加na...
小程序自定义顶部导航栏，uni-app微信小程序自定义顶部导航栏
程序猿的秃头之路
06-24 6879
uni-app微信小程序自定义顶部导航栏
微信小程序uni-shop
05-21
做微信小程序uni-shop所需的资源

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值