如何实现监听某些数值,异步页面请求后再渲染到页面上

news2024/11/27 18:45:35

问题:

当我们遇到小程序在某个页面,需要刷新另一个页面的数据时,通常都是返回到刷新页面,然后执行onshow的函数。

但是是否可以拿数值之后,直接就更新相应的数值就行了?不用整体刷新。或者有时候页面已经渲染出来,数据才拿到,倒是又不能用setdata方法渲染到页面上。

例如:

1、在自定义导航栏上或者自定义底部上进行数量的显示,需要数据改变后,就直接渲染在页面上才行。

2、自定义底部,双击之后,调用返回顶部方法等。


 

一、实现原理:

首先我们需要先发布事件,然后再需要执行的方法上订阅事件,不需要后再取消订阅的时间

二、实现步骤

步骤一:先写一个公共的方法用来调用,在app.js里面引用

const eventBus = {
  // 存储所有事件和对应的订阅者
  eventList: new Map(),
  // 订阅事件
  on(event, callback) {
    if (!this.eventList.has(event)) {
      this.eventList.set(event, new Set())
    }
    this.eventList.get(event).add(callback)
  },
  // 取消订阅事件
  off(event, callback) {
    if (this.eventList.has(event)) {
      const callbacks = this.eventList.get(event)
      callbacks.delete(callback)
      if (callbacks.size === 0) {
        this.eventList.delete(event)
      }
    }
  },
  // 发布事件
  emit(event, ...args) {
    if (this.eventList.has(event)) {
      const callbacks = this.eventList.get(event)
      callbacks.forEach((callback) => {
        callback.call(null, ...args)
      })
    }
  }
}

module.exports = eventBus

步骤二、然后调用这个文件

进行发布事件

getApp().eventBus.emit('double_tab0');

步骤三、然后接口这个函数,可以在页面上onLoad方法中执行

getApp().eventBus.on('double_tab0', data => {

      this.goto_top_met()//调用自己想要执行的函数

   })

步骤四、然后销毁这一发布方法,可以在页面销毁之前销毁。若多个地方需要用,就不需要销毁

App.eventBus.off('double_tab0');

三、总结

通过简单的监听数值,进行异步页面的刷新,即使不能使用setdata的方法下,也可以执行数据的调用方法,简单高效的监听数据的改变后再触发方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/720072.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

7.3.4 【Linux】文件系统检验

xfs_repair 处理 XFS 文件系统 xfs_repair 可以检查/修复文件系统,不过,因为修复文件系统是个很庞大的任务!因此,修复时该文件系统不能被挂载。 fsck.ext4 处理 EXT4 文件系统 fsck 是个综合指令,如果是针对 ext4 的…

“软件源 xxx 的选项 Signed-By 中含有互相冲突的值 xxx“解决方法

问题: 解决方法: 删除目录“/etc/apt/sources.list.d”下的所有文件。(至于为什么,我也不知道) 参考文章: Ubuntu18.04 安装Docker 报错:Signed-By 中含有互相冲突的值_Wynne然然不乖的博客-CS…

基于Springboot+Vue的房屋中介系统(源代码+数据库+14000字论文)064

基于SpringbootVue的房屋中介系统(源代码数据库14000字论文)064 一、系统介绍 本项目前后端分离 本系统分为管理员、用户、中介经纪人三种角色 用户角色包含以下功能: 登录、注册、个人信息修改、密码修改、房屋查看、经纪人联系 中介经纪人角色包含以下功能&…

开拓全球市场:国内企业如何通过TikTok直播开创品牌新篇章

在当今全球化的商业环境中,许多国内企业渴望将自己的品牌推向海外市场。然而,进军海外市场并不容易,尤其是对于那些缺乏国际推广经验的品牌来说。然而,随着社交媒体的兴起,一种新的推广方式正在引起关注,那…

软件测试方法

软件测试是在软件投入生产性运行之前,对软件需求分析、设计规格说明和编码的最终复审,是软件质量控制的关键步骤。 软件开发过程是一个自顶向下、逐步细化的过程,而测试过程则是依相反的顺序安排的自底向上、逐步集成的过程。 一、白盒测试…

【工厂模式与抽象工厂】—— 每天一点小知识

💧 工厂模式与抽象工厂 \color{#FF1493}{工厂模式与抽象工厂} 工厂模式与抽象工厂💧 🌷 仰望天空,妳我亦是行人.✨ 🦄 个人主页——微风撞见云的博客🎐 🐳 《数据结构与算法》专栏的文…

数据库|TiDB多副本损坏,别着急!有损恢复帮你化险为夷!

高文锋 |后端开发工程师 目录 一、前言 二、TiDB数据库的存储架构 三、集群信息 (一)Store情况 (二)测试表db 1.sbtest 1的region分布情况 (三)模拟tikv出现故障 (四)有损不…

vue【过滤器】

目录 1:过滤器的基本语法 1.1:示例代码 1.2:注意事项 2:使用Vue.filter定义全局过滤器 2.1:私有过滤器 2.2:全局过滤器 3:使用全局过滤器格式化时间 3.1:处理如图的时间 3.…

接口测试异常场景耗时耗力?一文帮你解决

背景 随着前后端分离、微服务等技术的广泛应用,接口测试在整个测试过程中扮演的角色越来越重要,如何更加高效地把接口测好、测得更加充分就成了一个亟待解决的难题。 当前在对具体的某一接口进行测试时,普遍采取的方法是测试人员按照接口文…

Vue3使用Markdown编辑器并显示

安装markdown-it npm i kangc/v-md-editornext -S 在main.js中全局注册 import { createApp } from vueimport VueMarkdownEditor from kangc/v-md-editor; import kangc/v-md-editor/lib/style/base-editor.css; import vuepressTheme from kangc/v-md-editor/lib/theme/vu…

null 类对象

这篇文章有助于理解类与对象。类是一种类型&#xff0c;而对象则是一种类型的具体的东西了&#xff0c;即对象是要分配内存的。下面看一下很简单的例子 #include <stdio.h> #include <stdlib.h> #include <memory>class CTest { public:CTest(): mValue(100…

Axure教程—表格新增(中继器)

本文介绍的是用Axure中的中继器制作表格新增功能效果 效果 预览地址&#xff1a;https://ure09q.axshare.com 功能 用户点击“新增”出现表单&#xff0c;填写数据后保存数据。 制作 一、所需元件 矩形元件、中继器 二、制作过程 1、表格 拖入一个表格元件&#xff0c;表格…

go-zero的路由机制解析

构建web服务 参考官方教程go-zero安装 //安装goctl插件 go install github.com/zeromicro/go-zero/tools/goctllatest//加载go-zero依赖 go get -u github.com/zeromicro/go-zerolatestzero构建一个http服务器&#xff0c;基于goctl命令创建&#xff1a; goctl api new demo…

Redis 7 常用数据结构

10大数据结构图示 10大数据类型&#xff1a; redis字符串(String)redis列表(ist)redis哈希表(Hash)redis集合(Set)redis有序集合(ZSet)redis地理空间(GEO)redis基数统计(HyperLogLog)redis位图(bitmap)redis位域(bitfield)redis流(Stream) Redis键(key) 命令不区分大小写&am…

Burp代理单个站点

这里写自定义目录标题 Burp代理问题解决代理单个站点&#xff08;核心&#xff09; Burp代理问题 平时进行渗透的时候为浏览器挂上代理后往往全部站点都进行代理&#xff0c;有很多没用的包被抓到&#xff0c;影响测试&#xff0c;且和在burp上设置单个站点抓包比较麻烦。 解…

奥威BI云星空标准方案:部署快、一站式的SaaS BI解决方案

奥威BI云星空标准方案是一种基于奥威BI数据云&#xff08;SaaS平台&#xff09;的商业智能解决方案&#xff0c;提供一站式的销售管理、客户关系管理、人力资源管理、财务管理等业务流程。该方案提供了从数据连接、数据建模到数据分析与价值挖掘的全链路数据应用服务&#xff0…

[AJAX]使用fetch发送请求

fetch是浏览器原生的函数&#xff0c;不需要像原生AJAX新建实例就可以用于发送AJAX请求。 支持Promise获取异步的HTTP响应&#xff0c;和支持流式获取。 服务端代码 // 服务端准备 // 1、引入express const express require(express); // 2、创建应用对象 const app expre…

springcloud+docker+k8s发布脚本

项目结构如图&#xff1a; Dockerfile 文件 构建镜像&#xff1a; #基础镜像&#xff0c;如果本地仓库没有&#xff0c;会从远程仓库拉取 openjdk:8 FROM openjdk:8 #暴露端口 EXPOSE 9301 #容器中创建目录 RUN mkdir -p /usr/local/java #编译后的jar包copy到容器中创建到目录…

PyTorch的安装(ANACONDA+PyCharm)

文章目录 一、概念1.什么是PyTorch2.什么是ANACONDA3.什么是PyCharm 二、PyTorch的安装1.安装ANACONDA和PyCharm&#xff08;一路Next即可&#xff09;2.将ANACONDA与pycharm进行配置3.安装pytorch环境 一、概念 1.什么是PyTorch PyTorch是一个开源的机器学习框架&#xff0c…

软件测试需求分析方法

目录 前言&#xff1a; 1.1 什么是测试需求&#xff1f; 1.2 为什么要做测试需求&#xff1f; 2.测试需求分析方法 2.1 测试需求分析依据 2.2 测试需求架构划分 2.3 测试需求分析过程 2.3.1 测试需求收集 2.3.1.1 测试类型划分 2.3.1.2 测试类型细化 2.3.1.3 生成测…