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> 详细表明
[*]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>
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvZDg0NjY3ZGU1YTBkNDVkMmE5M2NkNGI5ZDZmOGQ0YzEucG5n
所用的 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样式
// 设置 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): 接口调用竣事的回调函数（调用乐成、失败都会实行）。
// 隐藏 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
// 显示 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 项的徽标文本
// 设置 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保存当前页面，跳转到应用内的某个页面
[*] 页面跳转：
[*]允许你在不关闭当前页面的情况下跳转到另一个页面。
[*]这种跳转方式会把新的页面压入导航栈，使得用户可以使用返回按钮回到之前的页面。
[*] 参数通报：
[*]可以通过 URL 的查询字符串来通报参数给目标页面。
[*]目标页面可以在 onLoad 事故中通过 e参数来获取这些通报过来的数据
uni.navigateTo({
url:'/pages/demo1/demo1?id=1'
}) onLoad((e)=>{
console.log(e.id);
}) uni.redirectTo关闭当前页面，跳转到应用内的某个页面
与 uni.navigateTo 差别的是，uni.redirectTo 会关闭当前页面，而不是在导航栈中添加一个新的页面。这种跳转方式常用于须要关闭当前页面并举行重定向的场景
// 构造带有参数的 URL
const params = `?id=${encodeURIComponent(123)}`;
// 使用 uni.redirectTo 进行跳转
uni.redirectTo({
url: `/pages/demo1/demo1${params}`
}); onLoad((e)=>{
console.log(e.id);
}) 重要作用
[*] 关闭当前页面并跳转：
[*]当须要关闭当前页面并跳转到另一个页面时，使用 uni.redirectTo 更符合。
[*]这种方式实用于登录验证、确认利用后的跳转等场景。
[*] 参数通报：
[*]可以通过 URL 的查询字符串来通报参数给目标页面。
[*]目标页面可以在 onLoad 事故中通过 options 参数来获取这些通报过来的数据。
uni.reLaunch关闭全部页面，打开到应用内的某个页面
uni.reLaunch 是 UniApp 中的一个 API，用于关闭全部页面并重新打开指定的页面。这个方法非常得当须要完全重置应用状态或重新初始化应用的场景
// 构造带有参数的 URL
const 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()划一
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金
页:
[1]