搜索
查看
编辑修改
首页
UNITY
NODEJS
PYTHON
AI
GIT
PHP
GO
CEF3
JAVA
HTML
CSS
搜索
IT小白
这个屌丝很懒,什么也没留下!
关注作者
热门标签
jquery
HTML
CSS
PHP
ASP
PYTHON
GO
AI
C
C++
C#
PHOTOSHOP
UNITY
iOS
android
vue
xml
爬虫
SEO
LINUX
WINDOWS
JAVA
MFC
CEF3
CAD
NODEJS
GIT
Pyppeteer
article
热门文章
1
目录优先的图片库网站PiGallery2
2
微信小程序webview与h5通过postMessage实现实时通讯的实现_webview postmessage
3
Linphone Android 在Linux 下编译运行_linux下linphone开发
4
QGis二次开发基础 -- 构建图层管理器
5
Auto.js UI界面检查悬浮和无障碍_autojs ui
6
05 ElasticSearch集群_cluster.name: my‐elasticsearch
7
最小二乘系统辨识课 中篇:递归最小二乘
8
安全认证和授权方式:嵌入式Jetty+Jersey_jetrry 身份认证 方式
9
python库turtle的双画笔并发绘制兔兔 表白神器_pythonturtle画小白兔
10
CSS组件:字体图标_fa图标
当前位置:
article
> 正文
uni 自定义底部导航问题_uniapp 自定义底部导航栏 跟随滚动
作者:IT小白 | 2024-02-22 22:31:02
赞
踩
uniapp 自定义底部导航栏 跟随滚动
uni 自定义底部导航问题
如果原生导航栏不能满足需求,推荐使用uni ui的自定义导航栏NavBar。这个前端导航栏自动处理了状态栏高度占位问题。
前端导航栏搭配原生下拉刷新时,
会有问题,包括
微信小程序
下iOS需要拉更长才能看到下拉刷新的三个点,而Android是从屏幕顶部下拉,无法从导航栏下方下拉。如果一定要从前端导航栏下拉,小程序下只能放弃原生下拉刷新,纯前端模拟,参考mescroll插件,但这样很容易产生性能问题。目前小程序平台自身没有提供更好的方案
App和H5下
,原生下拉刷新提供了circle样式,可以指定offset偏移量(pages.json的app-plus下配置),自定义下拉圈出现的位置。在hello
uni-app的扩展组件中有示例。
非H5端
,前端导航盖不住原生组件。如果页面有video、map、textarea(仅小程序)等原生组件,滚动时会覆盖住导航栏
如果是小程序下,可以使用cover-view来做导航栏,避免覆盖问题
如果是App下
,建议使用titleNView或subNVue,体验更好
前端组件在渲染速度上不如原生导航栏,原生导航可以在动画期间渲染,保证动画期间不白屏,但使用前端导航栏,在新窗体进入的动画期间可能会整页白屏,越低端的手机越明显。
以上讨论的是前端自定义导航栏
,但在App侧,原生导航栏也提供了比小程序导航更丰富的自定义性
titleNView:给原生导航栏提供更多配置,包括自定义按钮、滚动渐变效果、搜索框等,详见titleNView
subNView:使用nvue原生渲染,所有布局自己开发,具备一切自定义灵活度。详见subNVue
页面禁用原生导航栏后,想要改变状态栏的前景字体样式,仍可设置页面的 navigationBarTextStyle 属性(只能设置为
black或white)。如果想单独设置状态栏颜色,App端可使用plus.navigator.setStatusBarStyle设置。注意部分低端Android手机(4.4)自身不支持设置状态栏前景色。
鉴于以上问题,
在原生导航能解决业务需求的情况下,尽量使用原生导航
。甚至有时需要牺牲一些不是很重要的需求。在App和H5下,uni-app提供了灵活的处理方案:titleNView、subNVue、或整页使用nvue。但在小程序下,因为其自身的限制,没有太好的方案。有必要的话,也可以用条件编译分端处理。
声明:
本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:
https://www.wpsshop.cn/w/IT小白/article/detail/131589?site
推荐阅读
article
#
Uniapp
:
rpx
和
upx
的
区别_
upx
和
rpx
区别...
1
rpx
等于设备宽度
的
1/750。也就是说,在一个宽度为 750px
的
设计稿上,如果一个元素
的
宽度是 100px,...
赞
踩
article
Uni
app
uni
-
app
学习
与快速上手...
基于Vue.js:Uni
app
采用了Vue.js作为其核心框架,开发者可以使用熟悉的Vue语法进行开发。
学习
Vue.js...
赞
踩
article
【
uniapp
】
自定义
底部
tabbar
,根据
权限
显示
不同
名称或者
不同
个数
的
tabbar
及部分出现
的
问...
先看几种
不同
权限
下
的
用户所显示
的
tabbar
admin: 看全部
的
tabbar
其他用户:看部分
的
tabbar
。_unia...
赞
踩
article
uniapp
微信小
程序
根据不同
角色
实现
动态
路由
_
uniapp
动态
路由
...
不同
角色
/已登录未登录,都有不一样的底部导航栏
_
uniapp
动态
路由
uniapp
动态
路由
...
赞
踩
article
uniapp
解决
tabBar
增加
图标
问题_
uniapp
tabbar
图标
...
uniapp
开发app
tabbar
首页字体和
图标
问题_
uniapp
tabbar
图标
uniapp
tabbar
图...
赞
踩
article
uniapp
实现
页面
全局
配置
/ 底部导航栏
tabbar
_
uniapp
全局
设置 setnavig...
代码】
uniapp
实现底部导航栏
tabbar
。_
uniapp
全局
设置
setnavigationbartitle
un...
赞
踩
article
uniapp
设置
底部
导航栏_
uniapp
设置
底部
导航...
uniapp
设置
底部
导航栏_
uniapp
设置
底部
导航
uniapp
设置
底部
导航
uniapp
设...
赞
踩
article
uniapp
怎么设置
凸起
的
底部
tabbar
_
uniapp
底部
导航栏
中间
凸起
...
uniapp
的
tabbar
默认
的
话 是 没有
中间
凸起
的
但是耐不住我们
的
设计师
的
想法 就是想让
中间
的
突出 跟别人不一样...
赞
踩
article
uniapp
封装
凸起
导航
栏
_
uniapp
做底部
导航
凸起
...
my-tabbar.vue
[详细]
-->
赞
踩
article
【
uniapp
】
自定义
步骤
条
样式
...
【代码】【
uniapp
】
自定义
步骤
条
样式
。【
uniapp
】
自定义
步骤
条
样式
...
赞
踩
article
uniapp
rich
-
text
富
文本
组件在微信小程序中
自定义
内部元素样式...
(1)全局配置filter方法,实现富
文本
内容截取转换,附上‘
rich
-txt-p’样式类。(2)在app.vue中编辑...
赞
踩
article
uniapp
离线
打包文档_
uniapp
离线
文档...
uniapp
离线
打包_
uniapp
离线
文档
uniapp
离线
文档 ...
赞
踩
article
uniapp
H5
唤起
手机
App
中间
下载页
...
我这里直接是打开中间
下载页
,在
下载页
判断手机是否已存在
App
,有则
唤起
App
,没有则可点击下载按钮下载app。
唤起
App
...
赞
踩
article
UniAPP
快速
入门学习_
uniapp
快速
入门...
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到 iOS、Android、...
赞
踩
article
uni
app
H5 手写标题
组件
(
左上角
返回按钮带
跳转
页面
功能(可
跳转
tabbar
和
普通
页面
))+并...
uni
app
H5 手写标题
组件
(带
跳转
页面
功能)
_
uni
app
h5
网页
跳转
原生安卓
app
uni
app
h5
网页
跳转
原生安...
赞
踩
article
【
2023
】
uniapp
+
vue3
+
ts
超实用
模板
(续)
_
uniapp
+
vue3
+
ts
...
考虑到我们可能会有多套布局,tabbar页面,非tabbar页面,通屏页面,非通屏页面。在页面上的route-block...
赞
踩
article
uniapp
简单
的
登录
页面
直接
复制
可用(已优化)
_
uniapp
登录
页面
...
简单
的
登录
页面
直接
复制
可用(已优化)
_
uniapp
登录
页面
uniapp
登录
页面
...
赞
踩
article
uniapp
:
iconfont
的
使用
,以及如何手动
添加
图标
到
iconfont
.
css
...
文章目录第一步、下载需要
的
图标
第二步、
添加
到项目第三步、
使用
第四步、
添加
新
图标
到`
iconfont
.
css
`并
使用
第一步...
赞
踩
article
u
niapp
u
view
循环
子
表单
验证组件实现_
u
-
form
循环
校验...
u
niapp
u
view
循环
子
表单
验证组件实现,比如果我们最常见的简历功能实现,一个人会多个工作经验。_
u
-
form
循...
赞
踩
article
uniapp
+
unicloud
开发一个网页
端
,
小
程序
端
,
APP
端
,
桌面
端
的博客
CMS
系统——万能的三...
uniapp
+
unicloud
开发一个网页
端
,
小
程序
端
,
APP
端
,
桌面
端
的博客
CMS
系统——万能的三三
uniapp
+un...
赞
踩
相关标签
uni-app
学习
javascript
前端
微信小程序
小程序
vue.js
windows
app
vue
uniapp
css
android
android studio
android-studio