uniapp动态页面API

目录

 uni.setNavigationBarTitle动态设置标题

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

​编辑

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

uni.setTabBarItem设置 tabBar 项的文本

uni.setTabBarStyle(OBJECT)设置tabBar样式

uni.hideTabBar(OBJECT)隐藏 tabBar

uni.showTabBar(OBJECT)显示 tabBar

uni.setTabBarBadge(OBJECT)设置 tabBar 项的徽标文本

uni.removeTabBarBadge(OBJECT)移除 tabBar 项的徽标文本

uni.showTabBarRedDot(OBJECT)在 tabBar 项上显示红点

uni.hideTabBarRedDot(OBJECT)隐藏 tabBar 项的红点

下拉刷新

 通过属性手动下滑刷新

也可以通过API来控制

页面跳转

标签跳转

API跳转

uni.navigateTo保留当前页面，跳转到应用内的某个页面

uni.redirectTo关闭当前页面，跳转到应用内的某个页面

主要作用

uni.reLaunch关闭所有页面，打开到应用内的某个页面

uni.switchTab跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

uni.navigateBack关闭当前页面，返回上一页面或多级页面

---

 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>

---

详细解释

1. title：必须，字符串类型，表示新的导航栏标题。
2. success：可选，成功回调函数，当设置成功时触发。
3. 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 解释

1.  uni.showNavigationBarLoading

   • 功能：在导航栏中显示一个加载指示器。
   • 用途：当页面需要加载数据或执行耗时操作时，显示一个加载指示器，以提升用户体验。
   • 参数：无参数。
   • 示例：

     uni.showNavigationBarLoading();

2. ---

   uni.hideNavigationBarLoading

   • 功能：在导航栏中隐藏加载指示器。
   • 用途：当数据加载完成或耗时操作结束后，隐藏加载指示器。
   • 参数：无参数。
   • 示例：

     uni.hideNavigationBarLoading();

3. ---

   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样式
 

// 设置 tabBar 的整体样式
const setTabBarStyle = () => {uni.setTabBarStyle({backgroundColor: '#f5f5f5', // tabBar 的背景色color: '#666666', // 文字默认颜色selectedColor: '#ff0000', // 文字选中时的颜色borderStyle: 'black' // tabBar 上边框的颜色});
};

---

uni.setTabBarStyle 方法接受一个对象作为参数，该对象包含以下属性：

• borderStyle (String): tabBar 上边框的颜色，可选值为 'black' 或 'white'。
• backgroundColor (String): tabBar 的背景色。
• color (String): tabBar 文字默认颜色。
• selectedColor (String): tabBar 文字选中时的颜色。

uni.hideTabBar(OBJECT)隐藏 tabBar

uni.hideTabBar 方法用于隐藏 tabBar。它接受一个对象作为参数，该对象包含以下属性：

• animation (Boolean): 是否以动画方式隐藏 tabBar，默认为 false。
• success (Function): 接口调用成功的回调函数。
• fail (Function): 接口调用失败的回调函数。
• complete (Function): 接口调用结束的回调函数（调用成功、失败都会执行）。

---

	// 隐藏 tabBarconst hideTabBar = () => {uni.hideTabBar({animation: true, // 以动画方式隐藏 tabBarsuccess: function(res) {console.log('隐藏 tabBar 成功');},fail: function(err) {console.error('隐藏 tabBar 失败', err);}});};

uni.showTabBar(OBJECT)显示 tabBar

// 显示 tabBarconst showTabBar = () => {uni.showTabBar({animation: true, // 以动画方式显示 tabBarsuccess: 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 项的徽标文本

	// 设置 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 项的徽标文本

// 移除 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 项上显示红点

// 显示 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 项的红点

	// 隐藏 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): 接口调用结束的回调函数（调用成功、失败都会执行）。

下拉刷新

---

 通过属性手动下滑刷新

需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh

"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app","enablePullDownRefresh": true}

---

也可以通过API来控制

通过API控制也需要加入enablePullDownRefresh属性

"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app","enablePullDownRefresh": true}

---

uni.startPullDownRefresh() 用于结束下拉刷新状态

---

uni.stopPullDownRefresh() 用于结束下拉刷新状态

---

<template><view class="container"><button @click="onClick(1)">开始刷新</button><button @click="onClick(2)">停止刷新</button></view>
</template><script setup>
var onClick = (i) => {if(i===1){uni.startPullDownRefresh()}else{uni.stopPullDownRefresh()}
}
</script><style>
.container {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;
}
</style>

页面跳转

---

标签跳转

<navigator url="/pages/demo1/demo1">dome1</navigator>

API跳转

---

uni.navigateTo保留当前页面，跳转到应用内的某个页面

---

1. 页面跳转：

   • 允许你在不关闭当前页面的情况下跳转到另一个页面。
   • 这种跳转方式会把新的页面压入导航栈，使得用户可以使用返回按钮回到之前的页面。

2. 参数传递：

   • 可以通过 URL 的查询字符串来传递参数给目标页面。
   • 目标页面可以在 onLoad 事件中通过 e参数来获取这些传递过来的数据

---

	uni.navigateTo({url:'/pages/demo1/demo1?id=1'})

---

	onLoad((e)=>{console.log(e.id);})

uni.redirectTo关闭当前页面，跳转到应用内的某个页面

与 uni.navigateTo 不同的是，uni.redirectTo 会关闭当前页面，而不是在导航栈中添加一个新的页面。这种跳转方式常用于需要关闭当前页面并进行重定向的场景

---

// 构造带有参数的 URLconst params = `?id=${encodeURIComponent(123)}`;
// 使用 uni.redirectTo 进行跳转uni.redirectTo({url: `/pages/demo1/demo1${params}`});

---

	onLoad((e)=>{console.log(e.id);})

---

主要作用

1. 关闭当前页面并跳转：

   • 当需要关闭当前页面并跳转到另一个页面时，使用 uni.redirectTo 更合适。
   • 这种方式适用于登录验证、确认操作后的跳转等场景。

2. 参数传递：

   • 可以通过 URL 的查询字符串来传递参数给目标页面。
   • 目标页面可以在 onLoad 事件中通过 options 参数来获取这些传递过来的数据。

uni.reLaunch关闭所有页面，打开到应用内的某个页面

uni.reLaunch 是 UniApp 中的一个 API，用于关闭所有页面并重新打开指定的页面。这个方法非常适合需要完全重置应用状态或重新初始化应用的场景

---

// 构造带有参数的 URLconst params = `?id=${encodeURIComponent(123)}`;// 使用 uni.redirectTo 进行跳转uni.reLaunch({url: `/pages/demo1/demo1${params}`});

---

	onLoad((e)=>{console.log(e.id);})

uni.switchTab跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

用法一致,普通的跳转无法跳转到tabBar页面,通过uni.switchTab即可跳转

uni.navigateBack关闭当前页面，返回上一页面或多级页面

用于返回上一级页面,与JavaScript中的history.back()一致