uni-ui中去除uni-nav-bar存在的分隔线

最新推荐文章于 2024-05-31 09:43:17 发布
最新推荐文章于 2024-05-31 09:43:17 发布
阅读量1.1k 收藏
点赞数 2
分类专栏： 小程序 文章标签： html html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45155741/article/details/120487189
版权

先上图看问题：
在这里插入图片描述
找到uni-nav-bar的源码
在这里插入图片描述
在这里插入图片描述

在源码中我看到了这个东西uni-navbar–border
scss语法指向了我uni-app项目中的uni.scss文件，猜测一波这就是我们要找的边框颜色，所以找到uni.scss文件，再找到
在这里插入图片描述
修改为我们自己的背景颜色就搞定了
在这里插入图片描述

牛仔不当马仔
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
uni-ui安装初始化
11-23
【uni-ui安装初始化】是关于使用uni-app框架配置并引入uni-ui组件库的主题。uni-app是一个基于Vue.js开发的多端框架，它允许开发者编写一次代码，就能在多个平台上运行，包括H5、iOS、Android等。而uni-ui则是uni-...
【uni-app】去除uni-nav-bar底部边框
m0_63143512的博客
01-17 851
在标签中加入 :border="false"
uniapp解决自定义uni-nav-bar下方默认黑线、更改默认配置问题
m0_52711377的博客
07-28 2479
最近刚接触做一个微信小程序的项目，时间比较紧张一来就开干，属于是稀里糊涂就上手了，也不免遇到一些比较基础的问题，这里统一记录一下。
【Uniapp小程序】自定义导航栏uni-nav-bar滚动渐变色
最新发布
cnsv的博客
05-31 777
uniapp微信小程序滚动页面自定义导航栏渐变色
【uni-app】去除uni-nav-bar自定义导航栏下方分割线/底部下划线
前端一线搬运工的博客
07-07 5837
去除前效果： 解决代码: // 不要加scoped属性 <style lang="scss"> .uni-navbar { .uni-navbar__content { border: 0 none !important; } } </style> 去除后效果:
uni-app分割线微信小程序端不显示
斜照却相迎的博客
10-06 6983
uni-app分割线微信小程序端不显示 文章目录uni-app分割线微信小程序端不显示问题描述解决方案 问题描述 做项目时，遇到一个问题： 自定义的分割线组件在web端能显示，在微信小程序端却不能显示 代码基本如下： <template> <view> <hr class='divider' /> </view> </template> <style> .divider { al
uniapp 如何配置导航栏下底部线条
SLife4599的博客
01-26 4383
uniapp导航栏下的线条显示 , 只需要在pages.json页面就行配置就可以了 , 但是一定要在手机上运行查看 , 因为电脑上的预览是看不到的 图示: 只需要把圈住的代码复制到你要配置的路由模块即可! 代码配置: { "path": "pages/public/forget_password", "style": { "navigationBarTitleText": "忘记密码", "enablePullDownRefresh": false, "app-pl
uniapp 顶部的原生导航栏设置下边框
Bright2017的博客
11-20 6048
pages.json中，设置app-plus { "path" : "pages/login/login", "style" : { "navigationBarTitleText": "登录/注册", "app-plus": { "titleNView": { "splitLine": { "c...
uniapp控件间隔布局
长春小佛爷的博客
04-03 1636
<view> <radio-group @change="radioChange" style="display: flex;justify-content:space-between;align-items: center"> <label v-for="(item, index) in EvaluateStatus" :key="item.id" style="display: flex;justify-content: flex...
去掉navigationBar下面的一条横线
ZFJ_张福杰
04-12 3149
1.第一种方法     [[UINavigationBar appearance] setBackgroundImage:[[UIImage alloc] init] forBarPosition:UIBarPositionAny barMetrics:UIBarMetricsDefault];     [[UINavigationBar appearance] setSha
hbuildX 开发uni-app 引入组件uni-ui
03-23
2. 安装依赖：项目创建完成后，需要在命令行工具中运行`npm install`命令，安装uni-app所需的依赖库，包括uni-ui。 3. 配置文件：修改项目根目录下的`project.config.json`文件，配置微信小程序的相关信息，如appid...
uni-app+color-ui+uview-ui 搭建的H5端初始demo
04-09
【标题】"uni-app+color-ui+uview-ui 搭建的H5端初始demo"涉及的关键技术点包括： 1. **uni-app**：uni-app 是由ECharts团队开发的一个跨端框架，允许开发者编写一次代码，可以同时在iOS、Android、Web（H5）、微信...
uniapp-table中改版uni-table插件
07-03
总结起来，这个改版`uni-table`插件体现了开发者对UI组件的深度定制，以及对用户交互体验的重视。通过增加新的事件处理和样式调整，使得表格组件更适应实际应用场景，提高了应用的可操作性和可定制性。对于其他使用 ...
xls-image-upload图片上传插件-uni-ui图片上传
12-22
- 根据`readme.md`中的说明进行安装和配置，遵循uni-ui的规范来调用和使用组件。 - 在实际项目中，进行充分的测试以确保在各种设备和环境下都能正常工作。 - 时刻关注`changelog.md`，以便及时获取插件的更新信息，...
uni-app 实现中间标题左右渐变分割线
weixin_45932157的博客
05-20 268
【代码】uni-app 实现中间标题左右渐变分割线。
uniapp富文本编辑器，为文章添加分割线功能
qq_37455326的博客
01-11 642
【代码】uniapp富文本编辑器，为文章添加分割线功能。
unigui中如何去掉窗体边框
05-05 1012
方法：去除窗体边框 1、属性中设置边框BorderStyle=bsNone 2、ClientEvents-UniEvents事件中写代码 functionwindow.beforeInit(sender){Ext.apply(sender,{border:false,baseCls:'',//这个很关键背景透明shadow:false,frame:false,//width:400,...
uni-app实战商城类app和小程序
03-07
适用人群具备Html+Css+Javascript基础知识和Vuejs基础知识。课程概述本季度为uni-app实战项目第2季度，将实战商城类app和小程序，其中会包括发布到安卓端app，iOS端app、微信小程序，另外还会涉及Weex（nvue），Vuex模块化管理，商城支付模块等。课程大纲见以下图！
跨平台应用开发进阶(二十) ：uni-data-checkbox组件实现自定义样式及注意事项
IT全栈 华强工作室
06-11 5113
项目开发过程中，需要实现单选同意用户协议效果，但是交互方式采用多选，即点击-选中，点击-取消效果。 更改的时候需要注意以下几点：因为默认组件是定义好了的，如果要修改可以找到组件所属，也可以自行修改样式并覆盖原有样式。选择自行修改的时候，一定在页面去引入更改的css或者直接在此页面进行修改，否则修改无效。不要在中增加属性。注意小程序中跟h5页面是略有不同的，如下官方语句 关于第3点，“ 不要在中增加属性 ”尤为不解，本页面的样式控制本页面渲染视图样式，却不能使用，存在污染其他页面样式的风险。部分的实现如下：
uni-nav-bar
09-06
Uni-nav-bar 是一个通用的导航栏组件，可用于网页或应用程序的导航功能。它具有简洁美观的外观和易于使用的特点。 Uni-nav-bar 拥有以下功能和特点： 1. 响应式设计：适应不同屏幕尺寸，可以在手机、平板电脑和桌面设备上使用，并且能够自动调整导航栏的布局和大小。 2. 自定义样式：可以根据需求自定义导航栏的样式，包括背景颜色、字体颜色、菜单图标等。 3. 多种导航方式：可以选择水平导航栏或垂直导航栏，也可以通过配置实现下拉菜单、折叠菜单等多级导航栏效果。 4. 导航栏图标：可以为导航栏添加图标，便于用户快速识别和导航到对应的页面。 5. 路由功能：可以通过点击导航栏中的链接实现页面之间的跳转，并且可以使用路由参数传递信息。 6. 渐变动画：可配置导航栏的渐变效果，使切换页面时的过渡更加平滑和流畅。 7. 手势支持：在手机和平板电脑上，Uni-nav-bar 支持滑动手势和触摸手势，以提供更好的用户体验。 总之，Uni-nav-bar 是一个功能强大、易于使用且高度可定制的导航栏组件，能够满足不同应用场景的导航需求，并提供美观的界面和良好的用户体验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

牛仔不当马仔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值