Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
uni-app
提交
a5b49c88
U
uni-app
项目概览
DCloud
/
uni-app
14 天 前同步成功
通知
751
Star
38709
Fork
3642
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
8
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
8
Issue
8
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
未验证
提交
a5b49c88
编写于
9月 02, 2019
作者:
W
wanganxp
提交者:
GitHub
9月 02, 2019
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Update pages.md
上级
855153b9
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
12 addition
and
12 deletion
+12
-12
docs/collocation/pages.md
docs/collocation/pages.md
+12
-12
未找到文件。
docs/collocation/pages.md
浏览文件 @
a5b49c88
...
...
@@ -604,12 +604,12 @@ h5 平台下拉刷新动画,只有 circle 类型。
|:-|:-|:-|:-|
|allowsBounceVertical|String|YES|是否允许向下拉拽。支持 YES / NO|
|transparentTitle|String|none|导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明|
|titlePenetrate|String|NO|导航栏点击穿透|
|showTitleLoading|String|NO|是否进入时显示导航栏的 loading。支持 YES / NO|
|titleImage|String||导航栏图片地址(替换当前标题),必须为https的图片链接地址|
|backgroundImageUrl|String||下拉露出显示的背景图链接|
|backgroundImageColor|HexColor||下拉露出显示的背景图底色|
|gestureBack|String|NO|iOS 用,是否支持手势返回。支持 YES / NO|
|titlePenetrate|String|NO|导航栏点击穿透|
|showTitleLoading|String|NO|是否进入时显示导航栏的 loading。支持 YES / NO|
|titleImage|String||导航栏图片地址(替换当前标题),必须为https的图片链接地址|
|backgroundImageUrl|String||下拉露出显示的背景图链接|
|backgroundImageColor|HexColor||下拉露出显示的背景图底色|
|gestureBack|String|NO|iOS 用,是否支持手势返回。支持 YES / NO|
|enableScrollBar|String|YES|Android 用,是否显示 WebView 滚动条。支持 YES / NO|
**注意事项**
...
...
@@ -659,13 +659,13 @@ h5 平台下拉刷新动画,只有 circle 类型。
-
代码跳转到tabbar页面,api只能使用
[
uni.switchTab
](
https://uniapp.dcloud.io/api/router?id=switchtab
)
,不能使用uni.navigateTo、uni.redirectTo;使用navigator组件跳转时必须设置
[
open-type="switchTab"
](
https://uniapp.dcloud.io/component/navigator
)
-
tabbar 在H5端是div模拟的,属于前端屏幕窗口的一部分,如果要使用bottom居底定位方式,应该使用css变量
`--window-bottom`
,比如悬浮在tabbar上方10px的按钮,样式如下
`bottom: calc(var(--window-bottom) + 10px)`
-
中间带+号的tabbar模板例子,
[
参考
](
https://ext.dcloud.net.cn/plugin?id=98
)
。可跨端,但+号不凸起。
-
如需 tabbar 中间凸起,
App端可使用plus.nativeObj.view,
[
参考
](
https://ask.dcloud.net.cn/article/35036
)
。H5端可使用view自绘
。
-
如果不使用原生tabbar,在前端自己实现tabbar,在小程序和App端的性能体验不如原生tabbar。如果是多页方式,底部tabbar会在切换时闪一下,如果是单页方式,承载复杂页面内容会有性能问题。
[
插件市场
](
https://ext.dcloud.net.cn/search?q=tabbar
)
搜索tabbar有不少类似例子
。
-
App端使用nvue,可以不用这里的tabbar,自己做tabbar,没有性能体验问题
。
-
Android App上弹出键盘顶起tabbar的问题。如果是搜索框,建议点击后新开页面搜索(hello uni-app有例子);也可以
动态隐藏tabbar;也可以配置 manifest.json 中 app-plus->softinput->mode 设置为 adjustPan,注意仅打包后生效。
[
详见manifest配置
](
https://uniapp.dcloud.io/collocation/manifest?id=%E5%AE%8C%E6%95%B4-manifestjson
)
-
原生的tabbar只有一个且在首页。二级页的tab,
或者用前端实现,或者App端使用nvue
。
-
如需 tabbar 中间凸起,
可自定义tabbar,插件市场有例子,如colorUI等。但注意前端tabbar的性能不如原生tabbar,如果是多页方式,底部tabbar会在切换时闪执行转场动画,如果是单页方式,承载复杂页面内容会有性能问题。
[
插件市场
](
https://ext.dcloud.net.cn/search?q=tabbar
)
搜索tabbar有不少类似例子
。
-
App端若使用nvue,自定义tabbar,没有性能体验问题
。
-
纯nvue项目(manifest里renderer为native),目前使用pages.json里的tabbar反而影响性能,建议使用前端自己实现单页面的tabbar。后续会解决这个bug
。
-
Android App上弹出键盘顶起tabbar的问题。如果是搜索框,建议点击后新开页面搜索(hello uni-app有例子);也可以
配置 manifest.json 中 app-plus->softinput->mode 设置为 adjustPan,注意从HBuilderX 2.2开始,默认就是adjustPan,请不要手动改为adresize。另外修改输入法弹出模式需打包后生效。
[
详见manifest配置
](
https://uniapp.dcloud.io/collocation/manifest?id=%E5%AE%8C%E6%95%B4-manifestjson
)
;也可以动态隐藏tabbar。
-
原生的tabbar只有一个且在首页。二级页的tab,
前端自己实现
。
-
如果是需要先登录、后进入tab页面,不需要把登陆页设为首页,首页仍然是tabbar页,可参考HBuilderX新建uni-app项目时的登陆模板
-
前端弹出遮罩层挡不住tabbar的问题,跨端处理方式时动态隐藏tabbar。App端可以使用plus.nativeObj.view做弹出和遮罩,可参考这个
[
底部原生图标分享菜单例子
](
https://ext.dcloud.net.cn/plugin?id=69
)
-
前端弹出遮罩层挡不住tabbar的问题,跨端处理方式时动态隐藏tabbar。App端可以使用plus.nativeObj.view
或subNVue
做弹出和遮罩,可参考这个
[
底部原生图标分享菜单例子
](
https://ext.dcloud.net.cn/plugin?id=69
)
-
微信小程序模拟器1.02.1904090版有bug,在缩放模拟器页面百分比后,tabbar点击多次后就会卡死。真机无碍,使用时注意。
[
详见
](
https://developers.weixin.qq.com/community/develop/doc/0002e6e6bf0d602d8c783e10756400
)
**代码示例**
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录