uniapp动态页面API

uni.setNavigationBarTitle动态设置标题

uni.showNavigationBarLoading为标题添加加载动画与uni.hideNavigationBarLoading停止加载动画

编辑

uni.setNavigationBarColor用于设置导航栏的颜色，包括背景颜色和文字颜色。这对于自定义应用的主题和风格非常有用。

[uni.setTabBarItem设置 tabBar 项的文本](#uni.setTabBarItem设置 tabBar 项的文本)

uni.setTabBarStyle(OBJECT)

uni.hideTabBar(OBJECT)

uni.showTabBar(OBJECT)

uni.setTabBarBadge(OBJECT)

uni.removeTabBarBadge(OBJECT)

uni.showTabBarRedDot(OBJECT)

uni.hideTabBarRedDot(OBJECT)

uni.setNavigationBarTitle动态设置标题

是一个用于设置页面导航栏标题的方法。它允许你在页面加载后动态地更改导航栏的标题。
uni.setNavigationBarTitle(OBJECT)
代码示例
javascript 复制代码
<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停止加载动画
javascript 复制代码
<template>
  
  <view class="content">
    
    <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用于设置导航栏的颜色，包括背景颜色和文字颜色。这对于自定义应用的主题和风格非常有用。
javascript 复制代码
<template>
  
  <view class="content">
    
    <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): 接口调用结束的回调函数（调用成功、失败都会执行）。
javascript 复制代码
// 设置 tabBar 项的文本
	const setText = () => {
		uni.setTabBarItem({
			index: 0, // tabBar 的项的索引
			text: '新消息', // 设置的文本内容
			success: function(res) {
				console.log('设置文本成功');
			},
			fail: function(err) {
				console.error('设置文本失败', err);
			}
		});
	};
javascript 复制代码
	// 设置 tabBar 项的图标
	const setIcon = () => {
		uni.setTabBarItem({
			index: 0,
			iconPath: '', // 未选中状态的图标路径
			selectedIconPath: '', // 选中状态的图标路径
			success: function(res) {
				console.log('设置图标成功');
			},
			fail: function(err) {
				console.error('设置图标失败', err);
			}
		});
	};

uni.setTabBarStyle(OBJECT)
javascript 复制代码
// 设置 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): 接口调用结束的回调函数（调用成功、失败都会执行）。
javascript 复制代码
	// 隐藏 tabBar
	const hideTabBar = () => {
		uni.hideTabBar({
			animation: true, // 以动画方式隐藏 tabBar
			success: function(res) {
				console.log('隐藏 tabBar 成功');
			},
			fail: function(err) {
				console.error('隐藏 tabBar 失败', err);
			}
		});
	};

uni.showTabBar(OBJECT)
javascript 复制代码
	// 显示 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)
javascript 复制代码
	// 设置 tabBar 项的徽标文本
	const setTabBarBadge = () => {
		uni.setTabBarBadge({
			index: 0, // tabBar 的项的索引
			text: '1', // 设置的文本内容
			success: function(res) {
				console.log('设置 tabBar 徽标成功');
			},
			fail: function(err) {
				console.error('设置 tabBar 徽标失败', err);
			}
		});
	};
javascript 复制代码
	// 清除 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)
javascript 复制代码
	// 移除 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)
javascript 复制代码
// 显示 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)
javascript 复制代码
	// 隐藏 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): 接口调用结束的回调函数（调用成功、失败都会执行）。