【uni-app】去除uni-nav-bar底部边框

最新推荐文章于 2024-06-08 17:00:18 发布
最新推荐文章于 2024-06-08 17:00:18 发布
阅读量1k 收藏 10
点赞数 11
分类专栏： uni-app 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63143512/article/details/135643143
版权
文章介绍了在使用uni-app开发时，如何通过在<uni-nav-bar>标签中设置border属性为false来移除导航栏底部的边框，提供了具体代码示例。
摘要由CSDN通过智能技术生成
底部边框：

去除之前

解决办法：

在标签中加入 :border="false"

	<uni-nav-bar class="searchBar" :border="false">
		<view class="input-view">
			<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
			<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" @confirm="confirm" />
		</view>
	</uni-nav-bar>
解决之后：

Jason 六只熊
关注
专栏目录
uni-app实战之社区交友APP（5）搜索和发布页开发
CUFEECR的博客
01-28 3055
搜索页可以根据关键字搜索，通过生命周期和接口实现，还包括搜索历史，可以输入和点击关键词；根据关键词显示搜索结果。发布页需要自定义导航栏设置权限，需要使用uni-app官方提供的组件；文本输入框使用textarea；底部操作条包括选择分类、添加话题、选择图片和发布按钮，需要设置尺寸和添加动画效果；图片上传用官方模板提供的上传接口并进行修改即可，通过消息传递实现；删除图片需要添加图标并绑定事件；保存草稿使用生命周期onBackPress实现，通过缓存保存编辑内容，通过消息传递、ref和计算属性等方式实现。
uniapp优购项目----完整学习笔记（附录项目完整源码）
tigerhhzz的博客
01-23 2951
uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。详细的uni-app 官方文档，请翻阅。
uniapp 如何自定义导航栏并自适应机型
weixin_47970498的博客
09-01 2225
本文介绍了如何在 Uniapp 中自定义导航栏并自适应不同机型的屏幕大小。使用 `nav-bar` 组件可以方便地自定义导航栏。
去掉tabbar的边框线
kangli的专栏
11-21 4562
转载自：http://www.shangxueba.com/jingyan/2453883.html - (void)viewWillAppear:(BOOL)animated{//去掉UITabbar的边框线          [self.tabBarController.tabBar setBackgroundImage:[Utill createImageWithColor:[UI
【uni-app】去除uni-nav-bar自定义导航栏下方分割线/底部下划线
前端一线搬运工的博客
07-07 6010
去除前效果： 解决代码: // 不要加scoped属性 <style lang="scss"> .uni-navbar { .uni-navbar__content { border: 0 none !important; } } </style> 去除后效果:
uniapp原生导航栏添加下边框
qq_42103673的博客
10-31 796
2、方法二：此方法app端生效。1、方法一：通过全局样式添加。
uniapp项目怎么删除顶部导航栏和底部tabBar的默认样式 让页面更加美观
weixin_61728046的博客
10-14 4769
删除顶部导航栏和底部tabBar的默认样式 让页面更加美观
uni-ui中去除uni-nav-bar存在的分隔线
qq_45155741的博客
09-26 1251
先上图看问题： 找到uni-nav-bar的源码 在源码中我看到了这个东西uni-navbar–border scss语法指向了我uni-app项目中的uni.scss文件，猜测一波这就是我们要找的边框颜色，所以找到uni.scss文件，再找到 修改为我们自己的背景颜色就搞定了 ...
uni-app 小程序项目 一 起步 构建项目、tabBar、配置网络请求（使用npm包）、首页（轮播图、分页区域、楼层区）
m0_55170432的博客
07-11 1596
1.0 uni-app 简介 uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 详细的 uni-app 官方文档，请翻阅 https://uniapp.dcloud.net.cn/ 1.1 开发工具（ HBuilderX ） uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处： 模板丰富 完善的智能提示 一
ColorUI组件库简易教程之扩展插件
仗剑东游的猫
11-22 9569
按照惯例，在此奉上官方示例！！！ 目录 扩展插件 索引列表 微动画 全屏抽屉 垂直导航 扩展插件 索引列表 索引列表主要由scroll-view标签实现，类名为indexes，具体js逻辑请看源码，有些我没看懂，希望看懂的大佬教教我 <template> <view> <view class="cu-bar bg-white...
uniapp微信小程序项目-优购商城
热门推荐
zy_lalala的博客
12-12 1万+
uniapp 微信小程序 项目 优购商城
ios 找出导航栏下面的黑线(可隐藏,改变样式等)
li_yangyang_li的博客
04-28 1056
根据UI的设计,navigationbar需要跟界面一体化,但是下面这根黑线是比较烦的问题,可能界面一需要隐藏,界面二就要出现,也可能需要改变粗细之类的,又因为navigationbar会影响接下来的推栈,所以需要做一点小改动. 方法1:直接隐藏: //在页面出现的时候就将黑线隐藏起来 -(void)viewWillAppear:(BOOL)animated { [self.naviga
去掉UISearchBar自带的的边框背景
iOS&Android开发
05-15 2562
去掉UISearchBar自带的的边框背景 ，分为ios7后和ios7前的解决方案，代码如下：         UISearchBar* searchbar = [[UISearchBar alloc]initWithFrame:CGRectMake(5, 0, 310, 50)];         searchbar.tag = 1000;         searchbar.
去掉Nav 底部横线
Jackalsen的博客
08-02 1405
self.navigationController.navigationBar.barStyle = UIBarStyleBlack;         self.navigationController.navigationBar.translucent = YES;         [self.navigationController.navigationBar setSh
uni-app底部安全区调整
xinTianou123的博客
11-15 6457
uni-app底部安全区适配调整
uniapp自定义的下面导航
最新发布
weixin_45870300的博客
06-08 1117
在工作中需要自定定义好看一点的头部和导航栏下面目前感觉还是很简单的可以自己也可以在优化一下。
如何去除tabBar的上横线和navigationBar的下横线
zhongdian_liwei的博客
03-24 3342
隐藏tabBar横线 navigationBar横线
去掉 TabBar 上部横线以及 navigationBar 下部横线的方法探讨
郑亚恒的专栏
09-21 5145
在一些应用中需要将 TabBar 上部横线或者 navigationBar 下部横线取消掉，之前也尝试了多种方法，现将个人目前使用的方法列举如下，各位看官若是有更好的方案欢迎补充。 tabBar： 直接将系统 tabBar 中所有的控件打印输出，会发现有如下控件（数量依据标签栏的数量不同而不同） ( ">", ">", ">", ">" ) 再结合
uniApp - tabbar的设置
Aan___的博客
12-12 1651
原生小程序的tabbar和uniApp里的tabbar绝大多数属性是一致的，但是uniApp里可能会有更多的属性设置。在 pages.json 页面，写一个 tabBar 属性，属性值是我们定义的 tabbar。
uni-app实现图片查看与底部菜单栏小型项目
2. 底部菜单栏开发：在uni-app项目中，底部菜单栏是非常常见的一种导航方式。它一般作为底部固定位置的导航组件，提供页面间的快速切换。在uni-app中，可以通过`<tabbar>`组件实现底部菜单栏功能，并通过配置其`list...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值