当前位置: 首页 > news >正文

uniapp动态页面API

目录

 uni.setNavigationBarTitle动态设置标题

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

​编辑

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

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)

代码示例

<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: 动画的效果,可选值为 lineareaseIneaseOutease, 默认值为 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>

相关文章:

uniapp动态页面API

目录 uni.setNavigationBarTitle动态设置标题 uni.showNavigationBarLoading为标题添加加载动画与uni.hideNavigationBarLoading停止加载动画 ​编辑 uni.setNavigationBarColor用于设置导航栏的颜色&#xff0c;包括背景颜色和文字颜色。这对于自定义应用的主题和风格非常有…...

最优化方法Python计算:求解约束优化问题的拉格朗日乘子算法

从仅有等式约束的问题入手。设优化问题(7.8) { minimize f ( x ) s.t. h ( x ) o ( 1 ) \begin{cases} \text{minimize}\quad\quad f(\boldsymbol{x})\\ \text{s.t.}\quad\quad\quad \boldsymbol{h}(\boldsymbol{x})\boldsymbol{o} \end{cases}\quad\quad(1) {minimizef(x)s.…...

每日OJ_牛客_骆驼命名法(递归深搜)

目录 牛客_骆驼命名法&#xff08;简单模拟&#xff09; 解析代码 牛客_骆驼命名法&#xff08;简单模拟&#xff09; 骆驼命名法__牛客网 解析代码 首先一个字符一个字符的读取内容&#xff1a; 遇到 _ 就直接跳过。如果上一个字符是 _ 则下一个字符转大写字母。 #inclu…...

MySQL 数据库管理与操作指南

文章目录 MySQL 数据库管理与操作指南1. 忘记 MySQL 密码的处理方法2. MySQL 数据库备份与恢复2.1 数据库备份2.2 数据库恢复 3. MySQL 用户与权限管理3.1 创建用户与授权3.2 查看所有用户3.3 删除用户 4. 关闭 GTID 复制模式5. 查看数据表的存储引擎5.1 查看 MySQL 支持的存储…...

Android Manifest 权限描述大全对照表

115工具网&#xff08;115工具网-一个提供高效、实用、方便的在线工具集合网站&#xff09;提供Android Manifest 权限描述大全对照表&#xff0c;可以方便andriod开发者查看安卓权限描述功能 权限名称描述android.permission.ACCESS_CHECKIN_PROPERTIES访问登记属性读取或写入…...

Ollama Qwen2 支持 Function Calling

默认 Ollama 中的 Qwen2 模型不支持 Function Calling&#xff0c;使用默认 Qwen2&#xff0c;Ollama 会报错。本文将根据官方模板对 ChatTemplate 进行改进&#xff0c;使得Qwen2 支持 Tools&#xff0c;支持函数调用。 Ollama 会检查对话模板中是否存在 Tools&#xff0c;如…...

APP测试工程师岗位面试题

一、你们公司研发团队采用敏捷开发模式的原因&#xff1f; 由于版本节奏比较快&#xff0c;开发与测试几乎并行&#xff0c;一个版本周期内会有两版在推动&#xff0c;也就是波次发布&#xff0c;波次发布用于尝试新加入的功能&#xff0c;做小范围快速的开发&#xff0c;验证…...

如何进行 AWS 云监控

什么是 AWS&#xff1f; Amazon Web Services&#xff08;AWS&#xff09;是 Amazon 提供的一个全面、广泛使用的云计算平台。它提供广泛的云服务&#xff0c;包括计算能力、存储选项、网络功能、数据库、分析、机器学习、人工智能、物联网和安全。 使用 AWS 有哪些好处&…...

第十六篇:走入计算机网络的传输层--传输层概述

1. 传输层的功能 ① 分割与重组数据 一次数据传输有大小限制&#xff0c;传输层需要做数据分割&#xff0c;所以在数据送达后必然也需要做数据重组。 ② 按端口号寻址 IP只能定位数据哪台主机&#xff0c;无法判断数据报文应该交给哪个应用&#xff0c;传输层给每个应用都设…...

提升效率!ArcGIS中创建脚本工具

在我们日常使用的ArcGIS中已经自带了很多功能强大的工具&#xff0c;但有时候遇到个人的特殊情况还是无法满足&#xff0c;这时就可以试着创建自定义脚本工具。 一、编写代码 此处的代码就是一个很简单的给图层更改别名的代码。 1. import arcpy 2. input_fc arcpy.GetParam…...

无人机之报警器的作用

一、紧急救援与辅助搜救 紧急救援&#xff1a;在事故或紧急情况下&#xff0c;无人机报警器可以迅速发出警报&#xff0c;指引救援人员前往事故地点&#xff0c;提高救援效率。 辅助搜救&#xff1a;无人机搭载报警器可以辅助寻找失踪人员或其他需要搜救的场景&#xff0c;通…...

风格控制水平创新高!南理工InstantX小红书发布CSGO:简单高效的端到端风格迁移框架

论文链接&#xff1a;https://arxiv.org/pdf/2408.16766 项目链接&#xff1a;https://csgo-gen.github.io/ 亮点直击 构建了一个专门用于风格迁移的数据集设计了一个简单但有效的端到端训练的风格迁移框架CSGO框架&#xff0c;以验证这个大规模数据集在风格迁移中的有益效果。…...

python文件自动化(4)

接上节课内容&#xff0c;在开始正式移动文件到目标文件夹之前&#xff0c;我们需要再思考一个问题。在代码运行之前&#xff0c;阿文的下载文件夹里已经存在一些分类文件夹了&#xff0c;比如图例中“PDF文件”这个文件夹就是已经存在的。这样的话&#xff0c;在程序运行时&am…...

HTTP 方法

HTTP 方法 1. 引言 HTTP&#xff08;HyperText Transfer Protocol&#xff0c;超文本传输协议&#xff09;是互联网上应用最为广泛的协议之一。它定义了客户端和服务器之间交换信息的格式和规则。在HTTP通信中&#xff0c;客户端&#xff08;通常是浏览器&#xff09;向服务器…...

通过redis-operator 来部署 Redis Cluster 集群

安装 Redis Operator 首先&#xff0c;需要安装 redis-operator。可以通过 Helm 或直接应用 YAML 文件来安装。 使用 Helm 安装&#xff1a; helm repo add ot-helm https://ot-container-kit.github.io/helm-charts/ helm install redis-operator ot-helm/redis-operator --…...

vue3集成sql语句编辑器

使用的是codemirror 安装 pnpm add codemirror vue-codemirror --savepnpm add codemirror/lang-sqlpnpm add codemirror/theme-one-dark使用 <template><codemirror v-model"configSql" placeholder"Code goes here..." ref"codemirrorR…...

Optuna发布 4.0 重大更新:多目标TPESampler自动化超参数优化速度提升显著

Optuna这个备受欢迎的超参数优化框架在近期发布了其第四个主要版本。自2018年首次亮相以来&#xff0c;Optuna不断发展&#xff0c;现已成为机器学习领域的重要工具。其用户社区持续壮大&#xff0c;目前已达到以下里程碑&#xff1a; 10,000 GitHub星标每月300万 下载量16,00…...

https和harbor仓库跟k8s

目录 https 做证书 harbor仓库 https https是加密的http&#xff0c;它的端口是443&#xff0c;它的协议是tcp协议。建立连接和普通的tcp是一样的&#xff0c;都是三次握手和四次挥手&#xff0c;但是它三次握手之后有一个步骤&#xff1a;SSL或者TLS握手的过程&#xff0c…...

云计算之网络

目录 一、VPC&#xff1a;云网络的基石 1.1 VPC产品介绍 1.2 vswitch交换机 1.3 vrouter路由器 1.4 产品架构 1.5 常见问题解答及处理 1.5.1 VPC内如何查询某个IP归属? 1.5.2 网络ACL阻断导致ECS访问CLB不通 1.5.3 EIP秒级突发/分布式限速丢包 1.5.4 NAT网关的流量监…...

MySQL Workbench 的入门指南

前言 MySQL Workbench 是一个官方的图形化工具&#xff0c;用于开发、管理和设计 MySQL 数据库服务器。它提供了丰富的功能&#xff0c;可以帮助数据库管理员、开发者以及DBA们高效地工作。下面是一个MySQL Workbench的入门指南&#xff0c;介绍如何安装和使用它。 安装 MyS…...

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...