uniapp之去除app的导航栏

最新推荐文章于 2023-02-15 15:57:01 发布
最新推荐文章于 2023-02-15 15:57:01 发布
阅读量349 收藏
点赞数
分类专栏： vue 前端 文章标签： html uniapp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42794826/article/details/113812504
版权
vue 同时被 2 个专栏收录
18 篇文章 2 订阅
订阅专栏
前端
13 篇文章 0 订阅
订阅专栏

在pages.sjon里面的要禁用的页面style添加如下代码即可

"style": {
				"app-plus":{
					"titleNView":false
				}
			}
小小雨伞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app去掉页面导航栏
World_Mei的博客
07-11 4468
全局去掉顶部导航 "globalStyle": { "navigationStyle":"custom", //可以去掉小程序端的顶部导航 "app-plus":{ "titleNView":false // 去掉APP、H5的顶部导航 } }, 去掉单页面顶部导航 "path": "pages/index/shopping", "style": { "navigationBarTitleText": "商城", "navigationStyle":"custom", //可以去掉小程序端
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
最新发布
09-23
自定义tabbar底部导航栏，简洁，方便，二开 使用教程 将组件拷贝到uni_modules目录内，然后其他页面进行引用即可 <TC-tabBar :zhi="zhi"></TC-tabBar> </template>
uniapp 去掉顶部导航栏
热门推荐
sky_sunshine_x的博客
05-09 2万+
1.去掉所有导航栏 "globalStyle": { "navigationBarTextStyle": "white", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#007AFF", "backgroundColor": "#FFFFFF", "navigationStyle":"custom", "app-plus":{ "titleView":false }
uniapp取消导航栏
weixin_45397693的博客
03-05 1132
1.在app.json里找到需要取消导航的页面 2.在style里写入 “app-plus”:{ “titleNView”:false }
uniapp去除顶部导航栏
qq_41818857的博客
08-17 819
"globalStyle": { "navigationBarTextStyle": "white", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#007AFF", "backgroundColor": "#FFFFFF", "navigationStyle":"custom", "app-plus":{ "titleView":false } }
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
12-13
在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框，只需在page.json里面做一些配置即可。设置app-plus，配置编译到App平台的特定样式。dcloud平台对app-plus做了详细说明：app-plus配置，需注意 ...
uniapp实现可以左右滑动导航栏
01-18
本文实例为大家分享了uniapp实现左右滑动导航栏的具体代码，供大家参考，具体内容如下 <home></home> <image click=isScale class=icon-style src=/static/iconImg/list.png xss=removed></image> <vi
uniapp关于支付宝小程序或钉钉小程序标题栏自定义.txt
12-30
uniapp关于支付宝小程序或钉钉小程序标题栏自定义
uniapp app 动态设置导航栏按钮显示和隐藏
weixin_45881304的博客
02-15 1955
【代码】uniapp app 动态设置导航栏按钮显示和隐藏。
uniapp 去掉默认顶部导航栏
weixin_65537918的博客
12-19 425
pages.json 输入以下代码。
uni-App 去掉顶部导航栏
Sapling
11-22 5254
1、给一个单独的页面隐藏顶部的导航栏，可以在pages.json里 单独的路由style下面配置 “app-plus”: {“titleNView”: false}2、给整个app 隐藏 可以在globalStyle 下 配置一个style “app-plus”: {“titleNView”: false}uni-App 去掉顶部导航栏。
H5开发使用 “navigationStyle“: “custom“,但是最外层的title标题显示不正确
a20001999的博客
11-28 865
小程序：uniapp使用自定义导航栏但是最外层显示不正确+小程序的真机运行小方法（不用部署测试）
navigationStyle“:“custom“或“app-plus“置顶状态栏
weixin_44952708的博客
05-29 1950
uniapp 使用"navigationStyle":“custom"或"app-plus”:{“titleNView”:false}出现效果顶到状态栏上解决方法 解决方法:
uniapp去除导航栏
ydZ157的博客
08-21 1380
在pages.json里 单独的路由style下面配置"app-plus": {"titleNView": false} ,例如: "pages": [ { "path": "pages/login/login", "style": { "app-plus": {"titleNView": false} } } ] 去除全局导航 在globalStyle 下 配置style "app-plu...
uni-app中隐藏底部导航栏
业余前端的职业经历
02-10 1万+
有时候我们不需要底部导航栏,或者我们需要自己重新书写底部导航栏 可以把原生的底部导航栏隐藏掉 在App.vue文件中 在声明周期函数 onLaunch onLaunch: function() { console.log('App Launch') uni.hideTabBar({}) } 上述方法在 微信小程序上确实可...
uni-app去掉页面顶部的导航栏
qq_19484091的博客
06-10 2440
找到文件 pages.json，增加代码 "style":{ "navigationStyle":"custom", "app-plus":{ "titleNView":false } } 没去掉前 去掉后
uniapp 去掉h5导航（微信公众号去掉和h5保留）
n_229397218的博客
01-19 4558
在uniapp开发中遇到代码转成h5的需求，在微信公众号中不需要设置的导航栏，在其他h5中保留导航栏。自己想处理方式如下（有用，就是需要在每个页面单独判断） 首先需要判断是否是微信浏览器 is_weixin(){ let ua = navigator.userAgent.toLowerCase(); return ua.indexOf('micromessenger') != -1; } 第二在app.vue中的方法中写函数，获取转化成h5导航栏标签uni-page-head 给设置成displ
uniapp app 实现底部导航栏点击动画
07-12
要在Uniapp中实现底部导航栏点击动画，你可以按照以下步骤进行操作： 1. 在页面中创建底部导航栏的布局。可以使用`uni-tabbar`组件来实现，其中每个导航项使用`uni-tabbar-item`组件。 2. 在Vue实例或组件的data中定义一个变量，用于保存当前选中的导航项索引。例如，你可以将其命名为`activeIndex`。 3. 在每个导航项的`uni-tabbar-item`组件中，绑定一个点击事件监听器，并在事件处理函数中更新`activeIndex`的值。 4. 使用条件渲染（v-if或v-bind）来根据`activeIndex`的值来动态添加选中状态的样式。 5. 可以使用CSS过渡或动画效果来实现点击动画。例如，在选中状态下，可以添加一个过渡效果或修改样式属性来实现动画效果。 这是一个简单的示例代码： ```html <template> <div> <uni-tabbar> <uni-tabbar-item icon="home" text="首页" @click="handleClick(0)" :selected="activeIndex === 0"></uni-tabbar-item> <uni-tabbar-item icon="message" text="消息" @click="handleClick(1)" :selected="activeIndex === 1"></uni-tabbar-item> <uni-tabbar-item icon="user" text="我的" @click="handleClick(2)" :selected="activeIndex === 2"></uni-tabbar-item> </uni-tabbar> </div> </template> <script> export default { data() { return { activeIndex: 0 }; }, methods: { handleClick(index) { this.activeIndex = index; } } }; </script> <style scoped> /* 添加选中状态的样式 */ .uni-tabbar-item[selected] { /* 选中状态下的样式 */ } </style> ``` 在上述示例中，我们使用了`uni-tabbar`和`uni-tabbar-item`组件来创建底部导航栏，并绑定了点击事件`@click`。在点击事件的处理函数中，我们更新了`activeIndex`的值，并通过条件渲染来添加选中状态的样式。你可以根据自己的需求自定义样式和动画效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值