• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

uni-app的API之设置导航条

开发技术 开发技术 3小时前 1次浏览

动态设置当前页面标题

uni.setNavigationBarTitle(OBJECT) , 用于动态设置当前页面的标题。

  • 如果需要在页面进入时设置标题,可以在onReady内执行,以避免被框架内的修改所覆盖。如果必须在onShow内执行需要延迟一小段时间。

Object参数说明

参数 类型 必填 说明
title String 页面标题
success Function 接口调用成功时回调函数
fail Function 接口调用失败时回调函数
complete Function 接口调用结束的回调函数(调用成功、调用失败都会执行)

示例

uni.setNavigationBarTitle({
    title: '新的标题'
});

设置页面导航条颜色

uni.setNavigationBarColor(OBJECT),设置页面导航栏的颜色。

  • 设置页面导航条颜色。如果需要进入页面就设置颜色,请延迟执行,防止被框架内设置颜色逻辑覆盖
  • 如果需要在页面进入时设置标题,可以在onReady内执行,以避免被框架内的修改所覆盖。如果必须在onShow内执行需要延迟一小段时间。
  • Android 上的 backgroundColor 参数有限制,黑色大于 rgb(30,30,30), 白色小于 rgb(235,235,235)。

平台差异说明

APP H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序 QQ小程序

 Object参数说明

参数 类型 必填 说明 平台差异
fronColor String 前景颜色,包括按钮、标题、状态栏的颜色,仅支持#ffffff和#000000 App、H5、微信小程序、百度小程序
backgroundColor String 背景颜色值,有效值为十六进制颜色  
animation Object 动画效果,{duration,timeingFunc} 微信小程序、百度小程序
success  Function 接口盗用成功的回调函数  
 fail Function 接口调用失败的回调函数  
 complete Function 接口调用结束的回调函数(调用成功,调用失败都会执行)  

animation结构

属性 类型 默认值 必填 说明
duration number 0 动画变化时间,单位ms
timingFunc String ‘linear’  否 动画变化方式

 animation.timingFunc有效值

说明
linear 动画从头到尾的速度是相同的。
easeln 动画以低速开始
easeOut 动画以低速结束
easelnOut 动画以低速开始和结束

 success返回参数

参数 类型 说明
errMsg String 调用结果

示例

1 uni.setNavigationBarColor({
2     frontColor: '#ffffff',
3     backgroundColor: '#ff0000',
4     animation: {
5         duration: 400,
6         timingFunc: 'easeIn'
7     }
8 })

 animation,使得导航栏颜色有渐变的动画过程。

在当前页面显示导航条加载动画

uni.showNavigationBarLoading(Object)。在当前页面显示导航条加载动画。

平台差异说明

App  H5  微信小程序  支付宝小程序 百度小程序 字节跳动小程序  QQ小程序
 ×  √ ×

 注:App平台调用此API时会在屏幕中间悬浮显示loading

Object参数说明

参数 类型 必填 说明
sucess Function 接口调用成功回调函数
fail Function 接口调用失败回调函数
complete Function 接口调用结束回调函数(调用成功、调用失败都会执行)

示例

uni.showNavigationBarLoading()

 在当前页面隐藏导航条加载动画

uni.hideNavigationBarLoading(OBJECT)。当前页面隐藏导航条动画。

  • 微信小程序自基础库版本2.8.3开始支持

  • 当用户打开的小程序最底层页面是非首页时,默认展示“返回首页”按钮,开发者可在页面onShow中调用hideHomeButton进行隐藏。

平台差异说明

App  H5  微信小程序  支付宝小程序 百度小程序 字节跳动小程序  QQ小程序
 ×  √ ×

Object参数说明

参数 类型 必填 说明
sucess Function 接口调用成功回调函数
fail Function 接口调用失败回调函数
complete Function 接口调用结束回调函数(调用成功、调用失败都会执行)

示例

uni.hideNavigationBarLoading()

隐藏返回首页按钮

uni.hideNavigationBarLoading()。隐藏返回首页按钮。

平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序 QQ小程序
× × × × 1.48.0+ 1.10.0+

Object参数说明

参数 类型 必填 说明
sucess Function 接口调用成功回调函数
fail Function 接口调用失败回调函数
complete Function 接口调用结束回调函数(调用成功、调用失败都会执行)

示例

uni.hideHomeButton()

参考网址


程序员灯塔
转载请注明原文链接:uni-app的API之设置导航条
喜欢 (0)