目录
uni.showNavigationBarLoading为标题添加加载动画与uni.hideNavigationBarLoading停止加载动画
uni.setTabBarItem设置 tabBar 项的文本
uni.setNavigationBarTitle动态设置标题
是一个用于设置页面导航栏标题的方法。它允许你在页面加载后动态地更改导航栏的标题。
uni.setNavigationBarTitle(OBJECT)
代码示例
<template> <view class="content"> <!-- 设置导航栏标题按钮 --> <button @click="changeNavigationBarTitle">更改导航栏标题</button> </view> </template> <script setup> // 更改导航栏标题 const changeNavigationBarTitle = () => { uni.setNavigationBarTitle({ title: '新标题', // 新的导航栏标题 success: function() { console.log('导航栏标题设置成功'); }, fail: function(err) { console.error('设置导航栏标题失败:', err); } }); }; </script>
详细解释
title
:必须,字符串类型,表示新的导航栏标题。success
:可选,成功回调函数,当设置成功时触发。fail
:可选,失败回调函数,当设置失败时触发。
uni.showNavigationBarLoading为标题添加加载动画与uni.hideNavigationBarLoading停止加载动画
<template> <!-- 页面的主要内容区域 --> <view class="content"> <!-- 点击按钮时触发 showLoading 方法 --> <button @click="showLoading">加载</button> </view> </template> <script setup> // 显示加载指示器 const showLoading = () => { // 显示导航栏中的加载指示器 uni.showNavigationBarLoading(); // 模拟异步操作,2秒后隐藏加载指示器 setTimeout(() => { // 隐藏导航栏中的加载指示器 uni.hideNavigationBarLoading(); }, 2000); }; </script> <style> /* 页面内容区域的样式 */ .content { padding: 20px; /* 内边距为 20px */ } </style>
所用的 API 解释
uni.showNavigationBarLoading
- 功能:在导航栏中显示一个加载指示器。
- 用途:当页面需要加载数据或执行耗时操作时,显示一个加载指示器,以提升用户体验。
- 参数:无参数。
- 示例:
uni.showNavigationBarLoading();
uni.hideNavigationBarLoading
- 功能:在导航栏中隐藏加载指示器。
- 用途:当数据加载完成或耗时操作结束后,隐藏加载指示器。
- 参数:无参数。
- 示例:
uni.hideNavigationBarLoading();
setTimeout
- 功能:设置一个定时器,在指定时间后执行回调函数。
- 用途:模拟异步操作,例如数据请求或耗时任务。
- 参数:
callback
: 回调函数。delay
: 延迟时间(毫秒)。- 案例
setTimeout(() => { // 回调函数 console.log('2秒后执行'); }, 2000);
uni.setNavigationBarColor用于设置导航栏的颜色,包括背景颜色和文字颜色。这对于自定义应用的主题和风格非常有用。
<template> <!-- 页面的主要内容区域 --> <view class="content"> <!-- 点击按钮时触发 changeNavigationBarColor 方法 --> <button @click="changeNavigationBarColor">更改导航栏颜色</button> </view> </template> <script setup> // 更改导航栏颜色 const changeNavigationBarColor = () => { // 设置导航栏颜色 uni.setNavigationBarColor({ frontColor: '#ffffff', // 文字和图标颜色 backgroundColor: '#ff0000', // 背景颜色 animation: { duration: 2000, // 动画持续时间 timingFunc: 'ease' // 动画效果 } }); }; </script> <style> /* 页面内容区域的样式 */ .content { padding: 20px; /* 内边距为 20px */ } </style>
API 介绍
uni.setNavigationBarColor
用于设置导航栏的颜色,包括背景颜色和文字颜色。这对于自定义应用的主题和风格非常有用。参数说明
uni.setNavigationBarColor
接受一个对象参数OBJECT
,其中包含以下属性:
- frontColor: 导航栏前面的颜色,通常是文字和图标颜色。默认值为
#000000
。- backgroundColor: 导航栏的背景颜色,默认值为
#ffffff
。- animation: 动画效果配置对象,可选。
- duration: 动画持续时间(单位:毫秒),默认值为 400。
- timingFunc: 动画的效果,可选值为
linear
,easeIn
,easeOut
,ease
, 默认值为linear
。
uni.setTabBarItem设置 tabBar 项的文本
在 UniApp 中,
uni.setTabBarItem
方法用于设置 tabBar 中某一项的属性。以下是uni.setTabBarItem
的详细属性说明及示例代码。
uni.setTabBarItem
属性说明
uni.setTabBarItem
方法有以下几个参数:
- index (Number): tabBar 的项的索引。
- text (String): tabBar 项的文字内容。
- iconPath (String): 图片路径,非当前项时显示的图片。
- selectedIconPath (String): 图片路径,当前项显示的图片。
- badgeText (String): 显示在 tabBar 项右上角的标记文本,默认为空字符串。
- success (Function): 接口调用成功的回调函数。
- fail (Function): 接口调用失败的回调函数。
- complete (Function): 接口调用结束的回调函数(调用成功、失败都会执行)。
// 设置 tabBar 项的文本 const setText = () => { uni.setTabBarItem({ index: 0, // tabBar 的项的索引 text: '新消息', // 设置的文本内容 success: function(res) { console.log('设置文本成功'); }, fail: function(err) { console.error('设置文本失败', err); } }); };
// 设置 tabBar 项的图标 const setIcon = () => { uni.setTabBarItem({ index: 0, iconPath: '', // 未选中状态的图标路径 selectedIconPath: '', // 选中状态的图标路径 success: function(res) { console.log('设置图标成功'); }, fail: function(err) { console.error('设置图标失败', err); } }); };
uni.setTabBarStyle(OBJECT)
// 设置 tabBar 的整体样式 const setTabBarStyle = () => { uni.setTabBarStyle({ backgroundColor: '#f5f5f5', // tabBar 的背景色 color: '#666666', // 文字默认颜色 selectedColor: '#ff0000', // 文字选中时的颜色 borderStyle: 'black' // tabBar 上边框的颜色 }); };
uni.setTabBarStyle
属性说明
uni.setTabBarStyle
方法接受一个对象作为参数,该对象包含以下属性:
- borderStyle (String): tabBar 上边框的颜色,可选值为
'black'
或'white'
。- backgroundColor (String): tabBar 的背景色。
- color (String): tabBar 文字默认颜色。
- selectedColor (String): tabBar 文字选中时的颜色。
uni.hideTabBar(OBJECT)
uni.hideTabBar
方法说明
uni.hideTabBar
方法用于隐藏 tabBar。它接受一个对象作为参数,该对象包含以下属性:
- animation (Boolean): 是否以动画方式隐藏 tabBar,默认为
false
。- success (Function): 接口调用成功的回调函数。
- fail (Function): 接口调用失败的回调函数。
- complete (Function): 接口调用结束的回调函数(调用成功、失败都会执行)。
// 隐藏 tabBar const hideTabBar = () => { uni.hideTabBar({ animation: true, // 以动画方式隐藏 tabBar success: function(res) { console.log('隐藏 tabBar 成功'); }, fail: function(err) { console.error('隐藏 tabBar 失败', err); } }); };
uni.showTabBar(OBJECT)
// 显示 tabBar const showTabBar = () => { uni.showTabBar({ animation: true, // 以动画方式显示 tabBar success: function(res) { console.log('显示 tabBar 成功'); }, fail: function(err) { console.error('显示 tabBar 失败', err); } }); };
uni.showTabBar
方法用于显示 tabBar。它接受一个对象作为参数,该对象包含以下属性:
- animation (Boolean): 是否以动画方式显示 tabBar,默认为
false
。- success (Function): 接口调用成功的回调函数。
- fail (Function): 接口调用失败的回调函数。
- complete (Function): 接口调用结束的回调函数(调用成功、失败都会执行)。
uni.setTabBarBadge(OBJECT)
// 设置 tabBar 项的徽标文本 const setTabBarBadge = () => { uni.setTabBarBadge({ index: 0, // tabBar 的项的索引 text: '1', // 设置的文本内容 success: function(res) { console.log('设置 tabBar 徽标成功'); }, fail: function(err) { console.error('设置 tabBar 徽标失败', err); } }); };
// 清除 tabBar 项的徽标文本 const clearTabBarBadge = () => { uni.setTabBarBadge({ index: 0, // tabBar 的项的索引 text: '', // 清除徽标 success: function(res) { console.log('清除 tabBar 徽标成功'); }, fail: function(err) { console.error('清除 tabBar 徽标失败', err); } }); };
uni.setTabBarBadge
方法用于设置 tabBar 项的徽标文本。它接受一个对象作为参数,该对象包含以下属性:
- index (Number): tabBar 的项的索引。
- text (String): 设置的文本内容。
- success (Function): 接口调用成功的回调函数。
- fail (Function): 接口调用失败的回调函数。
- complete (Function): 接口调用结束的回调函数(调用成功、失败都会执行)。
uni.removeTabBarBadge(OBJECT)
// 移除 tabBar 项的徽标文本 const removeTabBarBadge = () => { uni.removeTabBarBadge({ index: 0, // tabBar 的项的索引 success: function(res) { console.log('移除 tabBar 徽标成功'); }, fail: function(err) { console.error('移除 tabBar 徽标失败', err); } }); };
uni.removeTabBarBadge
方法用于移除 tabBar 项的徽标文本。它接受一个对象作为参数,该对象包含以下属性:
- index (Number): tabBar 的项的索引。
- success (Function): 接口调用成功的回调函数。
- fail (Function): 接口调用失败的回调函数。
- complete (Function): 接口调用结束的回调函数(调用成功、失败都会执行)。
uni.showTabBarRedDot(OBJECT)
// 显示 tabBar 项的红点 const showTabBarRedDot = () => { uni.showTabBarRedDot({ index: 0, // tabBar 的项的索引 success: function(res) { console.log('显示 tabBar 红点成功'); }, fail: function(err) { console.error('显示 tabBar 红点失败', err); } }); };
uni.showTabBarRedDot
方法用于在 tabBar 项上显示红点。它接受一个对象作为参数,该对象包含以下属性:
- index (Number): tabBar 的项的索引。
- success (Function): 接口调用成功的回调函数。
- fail (Function): 接口调用失败的回调函数。
- complete (Function): 接口调用结束的回调函数(调用成功、失败都会执行)。
uni.hideTabBarRedDot(OBJECT)
// 隐藏 tabBar 项的红点 const hideTabBarRedDot = () => { uni.hideTabBarRedDot({ index: 0, // tabBar 的项的索引 success: function(res) { console.log('隐藏 tabBar 红点成功'); }, fail: function(err) { console.error('隐藏 tabBar 红点失败', err); } }); };
uni.hideTabBarRedDot
方法用于隐藏 tabBar 项的红点。它接受一个对象作为参数,该对象包含以下属性:
- index (Number): tabBar 的项的索引。
- success (Function): 接口调用成功的回调函数。
- fail (Function): 接口调用失败的回调函数。
- complete (Function): 接口调用结束的回调函数(调用成功、失败都会执行)。