微信小程序页面跳转时导航栏标题显示加载中，结束时显示对应标题

最新推荐文章于 2022-12-05 14:43:04 发布

web前端 zxp

最新推荐文章于 2022-12-05 14:43:04 发布

阅读量1.8k

点赞数

分类专栏：微信小程序文章标签：小程序导航栏

本文链接：https://blog.csdn.net/qq_44163269/article/details/107049418

版权

本文介绍了如何在微信小程序中实现在页面跳转时，导航栏标题显示‘加载中’，加载结束时显示实际页面标题。通过在页面json配置，js文件中设置loading标记，以及在请求成功后更新导航栏文字，实现了这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

第一步 ------------ 设置加载中的导航栏标题 （完整参考代码在对下面）

在当前页面的 json 中文件设置

{
   
  "usingComponents": {
   },
  "navigationBarBackgroundColor": "#000", //导航栏颜色
  "navigationBarTextStyle":"white",       //字体设置
  "navigationBarTitleText": "加载中..."      //在这里设置⬅⬅⬅⬅⬅⬅

}

第二步 ------------ 开启 loading 加载中标记

在当前页面的 js 文件中设置

onLoad: function (options

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

web前端 zxp

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

小程序跳转详情页，如何设置导航栏的标题？

qq_45849232的博客

12-28

693

1、跳转页面将详情页导航栏展示的标题传过来，如果传参不会，参考这篇文章小程序点击带参数跳转页面（详情页）_姜姜锵锵#的博客-CSDN博客 2、详情页接收标题，并将导航栏进行更改。 ...

微信小程序---隐藏导航栏加载框和停止下拉动作

最新发布

weixin_51494148的博客

06-19

267

微信小程序—隐藏导航栏加载框和停止下拉动作。

参与评论您还未登录，请先登录后发表或查看评论

微信小程序 动态加载页面标题

hgp0487561的博客

07-31

630

一般来说，我们在小程序设置标题的时候需要在json文件中编辑“navigationBarTitleText” = “text”，但是如果想动态修改标题，让不同名字传进该页面的时候标题也不同的话，需要用到wx.setNavigationBarTitle()命令直接在js文件中的onLoad函数里调用这个函数就可以了 onLoad: function (options){ console.log(options.title); wx.setNavigationBar...

小程序下拉刷新以及导航栏标题显示加载状态

吕小布布布的博客

04-29

2135

页面json文件加上： "enablePullDownRefresh": true 加上这个属性的目的是设置页面允许下拉刷新 js部分代码如下： onLoad: function(){ wx.hideNavigationBarLoading();//完成加载 wx.stopPullDownRefresh();//停止下拉刷新 }, // 下拉刷新 on...

小程序 下拉刷新标题显示加载动态，过程颜色一体

php菜鸟技术天地

06-12

7835

两种方法都可以，第一种比较简单，易上手，毕竟一些逻辑系统已经给你处理好了，第二种适合那种想要自定义下拉刷新样式的小程序，我们讲解电商，就用第一种，系统提供的就好，主要是教会大家怎么用。以首页为例 1. home.json 参数配置"enablePullDownRefresh": true1我们哪个页面需要下拉刷新，就在哪个页面对应的xxx.json文件配置上面属性,这个属性从字面意思也可以知道，是...

微信小程序把玩（三十九）navigation API

热门推荐

FUCK

09-30

2万+

演示效果也看到了小程序也就提供这几个处理导航控制。值得注意的是只能同时导航五个页面主要属性：导航条一些方法wx.setNavigationBarTitle(object) 设置导航条的Title导航标题可以通过三种方式设置，第一种是通过全局配置名字统一，第二种就是在page中新建个json文件配置它会覆盖全局配置的title，第三种就是通过API设置。wx.showNavigationBarLoad

微信小程序动态获取页面标题

candyy5的博客

12-03

3086

wx.setNavigationBarTitle({ title: options.nickname + "的下级" //页面标题为路由参数 })

微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法

08-28

tabBar 是微信小程序底部固定的导航栏，适用于主页面的切换。例如： ```javascript wx.switchTab({ url: '/index' }) ``` 接着，我们重点讨论从列表item项跳转到下一个页面的步骤： 1. **渲染列表**：在微信...

微信小程序 页面跳转如何实现传值

08-30

本文将详细介绍如何在微信小程序中实现页面跳转的同时传递参数，让读者了解两种常见的方法：通过URL参数传递和使用Page对象的生命周期方法。（1）页面跳转如何传值（实现跳转到不同页面）在微信小程序中，我们...

微信小程序实现的动态设置导航栏标题功能示例

11-29

在微信小程序的开发过程中，动态设置导航栏标题是一项常见的需求，尤其在多个页面间跳转时，为了提供清晰的用户导航体验，每个页面的标题应该根据其内容进行个性化设置。本篇文章将详细介绍如何通过微信小程序的API ...

微信小程序代码-微信中的知乎--微信小程序demo.zip

04-22

3. **微信小程序结构**：每个微信小程序由多个页面组成，每个页面包括对应的JS、WXML（微信小程序的XML标记语言）、WXSS（微信小程序的样式语言）和JSON配置文件。在这个示例中，开发者可以通过查看这些文件来学习...

微信小程序添加底部导航栏

一天一小步，梦想一大步

05-02

2万+

我们平时上微信可以看到，微信的底部是4个导航栏选项进行切换的，我们自己开发小程序时，如果要添加像微信那样的底部导航栏的话，其实实现方式非常简单，便捷。在微信小程序开发IDE中，我们新建一个小程序项目，一下这些是必带的原有的一些文件。要添加底部导航的信息，我们需要在“app.json”这个文件中加入“tabBar”这个参数，例如："tabBar": { "color": "#a9b7b7", ...

微信小程序踩坑之跳转页面更改navigationBarTitleText

Crazydoubao的博客

01-24

2966

微信小程序踩坑之跳转页面更改navigationBarTitleText

解决微信小程序自定义tabbar跳转页面图标闪动问题

蜗牛~~

10-13

3516

解决微信小程序自定义tabbar跳转页面图标闪动问题

【vue】vue-router路由&页面跳转&vue设置页面标题

hanne_lovegood的博客

04-13

3501

导入router包（如果没下载的需要先install） router/index.js配置路由 import Router from ‘vue-router’ 安装路由Vue.use(Router) 配置路由routes main.js里引入路由文件并在new Vue({})里声明router router.beforeEach((to, from, next)截后设置标题 <router-link>和<router-view>使用路由路由嵌套关于不需要组件模式的页面跳转

微信小程序 页面一加载先显示骨架屏，接口请求完成再显示数据

weixin_48145150的博客

04-06

2433

微信小程序 页面一加载先显示骨架屏，接口请求完成再显示数据

vue 路由跳转打开新页面后，浏览器网页title显示异常的问题

lovecoding1的博客

12-05

1561

vue 路由跳转打开新页面后，浏览器网页title显示异常的问题

微信小程序使用wx.setNavigationBarTitle动态设置页码title在页面跳转时会有bug问题解决

一键写代码的博客

07-22

1564

这个问题出现的原因是，我的A页面的title是需要请求后台接口后才能设置的，请求接口是一个异步请求，这个请求发出后，里面跳转到另外一个页面B，已经发出的异步请求，并没有停止，而是等返回后执行wx.setNavigationBarTitle。这样就把B页面的titile给设置了。解决办法：我的是在A页面异步请求返回一个xx名称后，再将页面A的标题设置为xx名称。 data:{ tName:'' }, watch: { tName(curVal, oldVal) { var pages

微信小程序 页面跳转时导航栏标题显示加载中，结束时显示对应标题

微信小程序页面跳转时导航栏标题显示加载中，结束时显示对应标题