uniapp自定义返回事件(封装)

uniapp自定义返回事件

在我们使用uniapp时,我们导航栏一般都是自定义的,比如用uview框架的导航栏,那么返回事件通常会遇到以下几个问题

  • 返回事件前需要做一些额外的处理
  • h5项目刷新页面后返回失效
  • 返回按钮点击后到指定页面

如果只是监听返回按钮,可以通过onBackPress实现,但是很多时候为了开发起来维护方便,一般都是写一个导航栏组件统一管理,于是我这边简单封装了下导航栏组件。

在这里插入图片描述

核心代码如下:

  customBack (callback) {if (this.customUrl) {uni[this.pageType]({url:this.customUrl })return}const pages = getCurrentPages()if (callback) {callback()}else  {if(pages.length === 1) {history.back()}	else {uni.navigateBack()}}}
  • (参数)customUrl 自定义跳转路径
  • (参数)pageType 跳转类型,如navigateTo、redirectTo、switchTab
  • (参数)callback 回调函数,一般用于处理一些额外逻辑
  • (参数)isOverlay 这个是我根据自己的业务需求加的,本身导航栏会占位,部分页面需要不占位,下面代码中有这个参数。
  • getCurrentPages 获取页面栈,如果h5项目刷新后,将会被清除页面栈,这个时候如果要返回上一级,则需要调用浏览器的返回方法history.back()
  • sort插槽右侧按钮

在这里插入图片描述

使用起来也方便

  <navbar title="标题"/><navbar title="标题" custom-url="/pages/meu/index" page-type="switchTab"/><navbar title="标题"><view class="navbar-right" @click="saveEvent">自定义右侧按钮</view></navbar>

完整代码如下

  <template><u-navbar :title="title" :is-back='isBack' :class="isOverlay ? 'overlay' : ''" :custom-back='customBack'><template slot="right"><slot></slot></template></u-navbar></template><script>export default {props: {title: {type: String,default: ''},isBack: { // 是否显示返回按钮type: Boolean,default: true},isOverlay: { // 是否遮罩页面上(不占位)type: Boolean,default: false},customUrl: { // 自定义跳转地址type: String,default: ''},pageType: { // 跳转方式type: String,default: 'navigateTo'}},methods: {customBack (callback) {if (this.customUrl) {uni[this.pageType]({url:this.customUrl })return}const pages = getCurrentPages()if (callback) {callback()}else  {if(pages.length === 1) {history.back()}	else {uni.navigateBack()}}}}}</script><style lang="scss" scoped>.overlay{::v-deep {.u-navbar-fixed{background: transparent !important;}.u-navbar-placeholder{display: none;}}}</style>

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ubuntu20.04搭建Fabric教程

本章节环境配置 ubuntu: 20.04 go&#xff1a;1.16.3 docker: 20.10.6 docker-compose: 1.27.2 fabric&#xff1a;2.2.0 fabric-ca: 1.4.9 一 搭建通道 新建工作目录 mkdir fabric && cd fabric配置go代理 go env -w GO111MODULEon ​ #更新下载包的镜像 go env …

数据分析之Tebleau可视化:树状图、日历图、气泡图

树状图&#xff08;适合子分类比较多的&#xff09; 1.基本树状图的绘制 同时选择产品子分类和销售金额----选择智能推荐----选择树状图 2.双层树状图的绘制 将第二个维度地区拖到产品分类的下面---大的划分区域是上面的维度&#xff08;产品分类&#xff09;&#xff0c;看着…

ES的脑裂现象

目录 0 集群结点的职责1 什么是脑裂现象2 造成脑裂现象的原因2.1 网络问题&#xff08;最常见&#xff09;2.2 主节点负载过大&#xff0c;资源耗尽&#xff0c;别的结点ping不到主节点2.3 主节点JVM内存回收时间过长导致 3 脑裂现象的解决方案3.1 局域网部署3.2 角色分离&…

Vue中Element的下载

打开vscode让项目在终端中打开 输入npm install element-ui2.15.3 然后进行下载 在node_modules中出现element-ui表示下载完成 然后在输入Vue.use(ElementUI); import Vue from vue import App from ./App.vue import router from ./router import ElementUI from element-ui…

9.3.k8s的控制器资源(deployment部署控制器)

目录 一、deployment部署控制器概念 二、deployment资源的清单编写 三、小结 功能 使用场景 原理 四、deployment实现升级和回滚 1.编辑deployment资源清单&#xff08;v1版本&#xff09; 2.创建service资源用于访问 ​编辑 3.修改deploy清单中pod镜像版本为V2 4…

64位Office API声明语句第118讲

跟我学VBA&#xff0c;我这里专注VBA, 授人以渔。我98年开始&#xff0c;从源码接触VBA已经20余年了&#xff0c;随着年龄的增长&#xff0c;越来越觉得有必要把这项技能传递给需要这项技术的职场人员。希望职场和数据打交道的朋友&#xff0c;都来学习VBA,利用VBA,起码可以提高…

力扣295. 数据流的中位数

Problem: 295. 数据流的中位数 文章目录 题目描述思路复杂度Code 题目描述 思路 1.定义一个大顶堆和小顶堆&#xff1b; 2.当添加的数据小于大顶堆的堆顶元素或者大顶堆为空时&#xff0c;将元素添加到大顶堆&#xff1b;当元素大于大顶堆堆顶元素时添加到小顶堆&#xff1b;同…

18 如何设计微服务才能防止宕机?

在上一讲里&#xff0c;介绍了构建一个稳健的微服务的具体法则&#xff1a;防备上游、做好自己、怀疑下游&#xff0c; 并介绍了为什么要防备上游&#xff0c;以及一些防备上游的具体手段。 在本讲里&#xff0c;咱们一起来学习&#xff0c;做好微服务自身的设计和代码编写的常…

Android4.4真机移植过程笔记(一)

1、RK源码编译 获取内核源码&#xff1a; git clone git172.28.1.172:rk3188_kernel -b xtc_ok1000 内核编译环境&#xff1a; 从172.28.1.132编译服务器的/data1/ZouZhiPing目录下拷贝toolchain.tar.gz&#xff08;交叉编译工具链&#xff09;并解压到与rk3188_kernel同级目…

【项目部署】手把手带你从零部署项目:宝塔 + uwsgi + Django + 腾讯云 + Websocket

1. 前言 哈喽&#xff0c;大家好&#xff0c;我是jiaoxingk。今天带来的是有关Django项目部署的教程。 当我们完成了一个项目作品之后&#xff0c;我们肯定会迫不及待的就准备上线部署啦&#xff0c; 这篇教程将带你从服务器的配置选购&#xff0c;再通过安装宝塔的形式进行项目…

QT程序通过GPIB-USB-HS转接线控制数字万用表

1、硬件准备 1.1、数字万用表 型号 &#xff1a;Agilent 34401A 前面图示&#xff1a; 后面图示&#xff1a;有GPIB接口 1.2、GPIB-USB-HS转接线 2、GPIB协议基础了解 2.1、引脚 8条数据线&#xff1a;DIO1 ~ DIO8 5条管理线&#xff1a;IFC、ATN、REN、EOI、SRQ 3条交握线…

拆单算法交易(Algorithmic Trading)

TWAP TWAP交易时间加权平均价格Time Weighted Average Price 模型&#xff0c;是把一个母单的数量平均地分配到一个交易时段上。该模型将交易时间进行均匀分割&#xff0c;并在每个分割节点上将拆分的订单进行提交。例如&#xff0c;可以将某个交易日的交易时间平均分为N 段&am…

【云原生】Pod 的生命周期(一)

【云原生】Pod 的生命周期&#xff08;一&#xff09;【云原生】Pod 的生命周期&#xff08;二&#xff09; Pod 的生命周期&#xff08;一&#xff09; 1.Pod 生命期2.Pod 阶段3.容器状态3.1 Waiting &#xff08;等待&#xff09;3.2 Running&#xff08;运行中&#xff09;3…

鸿蒙内核源码分析(消息队列篇) | 进程间如何异步传递大数据

基本概念 队列又称消息队列&#xff0c;是一种常用于任务间通信的数据结构。队列接收来自任务或中断的不固定长度消息&#xff0c;并根据不同的接口确定传递的消息是否存放在队列空间中。 任务能够从队列里面读取消息&#xff0c;当队列中的消息为空时&#xff0c;挂起读取任务…

Discourse 清理存储空间的方法

Discourse 使用一段时间以后会发现硬盘空间占用非常多。 主要是因为 Docker Image 的问题&#xff0c;如果升级次数越多&#xff0c;空间占用越多。 运行下面的命令&#xff1a; ./launcher cleanup 能够帮助你清理 Discourse 占用的空间。 如下面代码所示&#xff1a; […

牛客热题:单链表排序

&#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;力扣刷题日记 &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 文章目录 牛客热题&#xff1a;单链表排序题目链接方法一&…

Windows php 安装 Memcached扩展、php缺失 Memcached扩展、Class ‘Memcached‘ not found

在Windows系统下如何安装 php Memcached 扩展 下载dll文件 pecl地址&#xff1a;https://pecl.php.net/package/memcached 根据版本进行选择 &#xff1a; 解压下载的文件后得到了这么样的文件结构&#xff1a; 配置 移动dll文件到相应文件位置 重点&#xff1a; libme…

jdk环境安装

jdk安装 创建软件安装的目录 mkdir -p /bigdata/{soft,server} /bigdata/soft 安装文件的存放目录 /bigdata/server 软件安装的目录 把安装的软件上传到/bigdata/soft 目录 解压到指定目录 -C :指定解压到指定目录 tar -zxvf /bigdata/soft/jdk-8u241-linux-x64.tar.gz -C /b…

【Osek网络管理测试】[TG3_TC3]tSleepRequestMin_L

&#x1f64b;‍♂️ 【Osek网络管理测试】系列&#x1f481;‍♂️点击跳转 文章目录 1.环境搭建2.测试目的3.测试步骤4.预期结果5.测试结果 1.环境搭建 硬件&#xff1a;VN1630 软件&#xff1a;CANoe 2.测试目的 验证DUT进入NMLimpHome状态后请求睡眠的最短时间是否正确…

Android --- 消息机制与异步任务

在Android中&#xff0c;只有在UIThread(主线程)中才能直接更新界面&#xff0c; 在Android中&#xff0c;长时间的工作联网都需要在workThread(分线程)中执行 在分线程中获取服务器数据后&#xff0c;需要立即到主线程中去更新UI来显示数据&#xff0c; 所以&#xff0c;如…