微信小程序实现监听点击返回挽留弹框功能(支持h5+uniapp)

 核心就是用 page-container这个组件

<template>
  <!-- #ifdef MP-WEIXIN -->
  <!-- 微信小程序使用page-container方式拦截返回 -->
  <page-container
    :show="showPageContainer"
    :duration="false"
    :overlay="false"
    @beforeleave="beforeBack"
  ></page-container>
  <!-- #endif -->
</template>

<script>
export default {
  props: {
    content: {
      type: String,
      default: '确定返回吗?'
    },
    title: {
      type: String,
      default: '系统提示?'
    }
  },
  data() {
    return {
      showPageContainer: true,
      quitFlag: true
    }
  },
  created() {
    // #ifndef MP-WEIXIN
    uni.addInterceptor('navigateBack', {
      invoke: () => {
        if (this.quitFlag) {
          uni.showModal({
            title: this.title,
            content: this.content,
            showCancel: true,
            success: ({ confirm }) => {
              if (confirm) {
                this.quitFlag = false
                this.$emit('backConfirm')
                uni.navigateBack({ delta: 1 })
                return false
              } else {
                this.$emit('backCancel')
              }
            }
          })
          return false
        }
      },
      complete: () => {
        // 删除拦截器
        uni.removeInterceptor('navigateBack')
      }
    })
    // #endif
  },
  methods: {
    beforeBack() {
      this.showPageContainer = false // 必须先隐藏page-container
      uni.showModal({
        title: this.title,
        content: this.content,
        showCancel: true,
        success: ({ confirm }) => {
          if (confirm) {
            this.$emit('backConfirm')
            uni.navigateBack({ delta: 1 })
          } else {
            this.$emit('backCancel')
            this.showPageContainer = true
          }
        }
      })
    }
  }
}
</script>

<style></style>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

IDEA一键备份MySQL数据库(mysqldump版)

问题 又到了搬MySQL数据库的时刻&#xff0c;这次我不想使用命令行备份&#xff0c;这次我想使用IDEA一键备份MySQL数据库。 解决 假设安装好mysqldump命令后&#xff0c;让IDEA使用mysqldump一键备份指定的数据库。具体IDEA配置如下&#xff1a; 这是IDEA上面的数据库到处…

element-ui 自定义点击图标/文本/按钮触发el-date-picker时间组件,不使用插槽

天梦星服务平台 (tmxkj.top)https://tmxkj.top/#/ 1. 图片预览 2.上代码 2.1html <el-button class"hide_input" size"small"><svg t"1711608996149" class"icon" viewBox"0 0 1024 1024" version"1.1"…

腾讯云4核8G服务器价格,12M带宽一年646元,送3个月

2024年腾讯云4核8G服务器租用优惠价格&#xff1a;轻量应用服务器4核8G12M带宽646元15个月&#xff0c;CVM云服务器S5实例优惠价格1437.24元买一年送3个月&#xff0c;腾讯云4核8G服务器活动页面 txybk.com/go/txy 活动链接打开如下图&#xff1a; 腾讯云4核8G服务器优惠价格 轻…

基于ssm的线上旅行信息管理系统论文

摘 要 随着旅游业的迅速发展&#xff0c;传统的旅行信息查询管理方式&#xff0c;已经无法满足用户需求&#xff0c;因此&#xff0c;结合计算机技术的优势和普及&#xff0c;特开发了本线上旅行信息管理系统。 本论文首先对线上旅行信息管理系统进行需求分析&#xff0c;从系…

MTransE阅读笔记

Multilingual Knowledge Graph Embeddings for Cross-lingual Knowledge Alignment 用于交叉知识对齐的多语言知识图谱嵌入(MTransE) Abstract 最近的许多工作已经证明了知识图谱嵌入在完成单语知识图谱方面的好处。由于相关的知识库是用几种不同的语言构建的&#xff0c;因…

设计模式(一)简介

一、书籍推荐及博客 大话设计模式 设计模式的艺术 XXL开源社区 | 博客 二、通俗版概念 创建型模式、结构型模式、行为型模式 怎么建房子、建什么样的房子、建的房子有什么用 三、重点模式及简述 1、创建型模式 工厂方法&#xff08;多态工厂的实现&#xff09; 抽象工厂…

c++|string模拟实现

目录 一、string.h 二、string.cpp 三、Test.cpp 对string的各种接口进行一个简易版的模拟实现&#xff0c;在模拟实现完之后对string的底层实现有了进一步的理解&#xff0c;了解大佬的编程写法思路。也算是对string有了一个小总结。 一、string.h 接口的声明。放在.h文件中…

面向对象的学习

封装 //用来描述一类事物的类&#xff0c;专业叫做&#xff1a;javabean类 //在javabean类是不写main方法的//一个java文件中可以定义多个类&#xff0c;且只能一个类是public修饰&#xff0c;而且public修饰的类名必须成为代码的文件名 ://在类中一般无需指定初始化值 存在默…

C# OpenCvSharp 轮廓检测

目录 效果 代码 下载 效果 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using OpenCvSharp; using OpenCvSharp.…

理解JVM:从字节码到程序运行

大家好&#xff0c;我是程序员大猩猩。 今天我们来讲一下JVM&#xff0c;好多面试者在面试的时候&#xff0c;都会被问及JVM相关知识。那么JVM到底是什么&#xff0c;要理解它到底是出于什么原因&#xff1f; JVM俗称Java虚拟机&#xff0c;它是一个抽象的计算机&#xff0c;…

Hadoop面试重点

文章目录 1. Hadoop 常用端口号2.Hadoop特点3.Hadoop1.x、2.x、3.x区别 1. Hadoop 常用端口号 hadoop2.xhadoop3.x访问HDFS 端口500709870访问 MR 执行情况端口80888088历史服务器1988819888客户端访问集群端口90008020 2.Hadoop特点 高可靠&#xff1a;Hadoop底层维护多个数…

京东电商实时数据采集:京东数据API接口海量数据采集京东商品详情页SKU实时采集

京东数据api接口&#xff1a;京东电商数据如何采集&#xff1f; 用户行为日志采集 &#xff1a;这种方法通常用于记录用户在网站上的行为&#xff0c;如点击、浏览等&#xff0c;以帮助分析用户行为和优化用户体验。通用数据采集 &#xff1a;可以通过数据直通车等方式进行&am…

数字孪生关键技术及体系架构

摘要&#xff1a; 数字孪生以各领域日益庞大的数据为基本要素&#xff0c;借助发展迅速的建模仿真、人工智能、虚拟现实等先进技术&#xff0c;构建物理实体在虚拟空间中的数字孪生体&#xff0c;实现对物理实体的数字化管控与优化&#xff0c;开拓了企业数字化转型的可行思路…

SpringBoot+Prometheus+Grafana实现应用监控和报警

一、背景 SpringBoot的应用监控方案比较多&#xff0c;SpringBootPrometheusGrafana是目前比较常用的方案之一。它们三者之间的关系大概如下图&#xff1a; 关系图 二、开发SpringBoot应用 首先&#xff0c;创建一个SpringBoot项目&#xff0c;pom文件如下&#xff1a; <…

本地部署大模型的几种工具(上-相关使用)

目录 前言 为什么本地部署 目前的工具 vllm 介绍 下载模型 安装vllm 运行 存在问题 chatglm.cpp 介绍 下载 安装 运行 命令行运行 webdemo运行 GPU推理 ollama 介绍 下载 运行 运行不同参数量的模型 存在问题 lmstudio 介绍 下载 使用 下载模型文件…

Git版本管理使用手册 - 8 - 合并分支、解决冲突

合并整个开发分支 切换到本地test分支&#xff0c;选择右下角远程开发分支&#xff0c;选择Merge into Current。然后提交到远程test仓库。 合并某次提交的代码 当前工作区切换成test分支&#xff0c;选择远程仓库中的dev开发分支&#xff0c;选择需要合并的提交版本右击&a…

机器学习优化算法(深度学习)

目录 预备知识 梯度 Hessian 矩阵&#xff08;海森矩阵&#xff0c;或者黑塞矩阵&#xff09; 拉格朗日中值定理 柯西中值定理 泰勒公式 黑塞矩阵&#xff08;Hessian矩阵&#xff09; Jacobi 矩阵 优化方法 梯度下降法&#xff08;Gradient Descent&#xff09; 随机…

Hive-技术补充-ANTLR的真实语法世界

一、上下文 上一篇博客<Hive-技术补充-ANTLR语法编写>&#xff0c;我们了解了如何使用ANTLR语法来表达词法结构和语法结构&#xff0c;下面我们循循渐进的处理身边用过的一些文件或语言&#xff1a; CSV、JSON、DOT、Cymbol、R 二、解析CSV文件 有这样一份csv文件 …

【详细讲解PostCSS如何安装和使用】

&#x1f308;个人主页:程序员不想敲代码啊&#x1f308; &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家&#x1f3c6; &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d; 希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提…

HarmonyOS 应用开发之UIAbility组件基本用法

UIAbility组件的基本用法包括&#xff1a;指定UIAbility的启动页面以及获取UIAbility的上下文 UIAbilityContext。 指定UIAbility的启动页面 应用中的UIAbility在启动过程中&#xff0c;需要指定启动页面&#xff0c;否则应用启动后会因为没有默认加载页面而导致白屏。可以在…
最新文章