uniapp 电商app 监听页面返回按键实现功能_uniapp 判断 back_叶浩成520的博客-程序员秘密

监听页面返回按键

电商app很多地方都是需要监听返回按键的，如果点击了返回则弹窗提示信息，用户点击“确认”则返回，否则页面不返回。

以电商app支付页面为例，如果在支付页面进行页面返回，则需要提示用户是否退出支付。

页面如下：
在这里插入图片描述

data(){
    
	return{
    
		giveUp:false,
		backFlag:false
	}
},
onBackPress(e) {
    
	if(this.giveUp){
    
		return;
	}
	if(e.from == "backbutton"){
    
		this.backFlag = true;
		return true;
	}
},

弹窗部分代码：

<view class="tanchuang" v-if="backFlag" @click="backFun">
	<view class="toast" @click.stop>
		<view class="toast-tit">提示</view>
		<view class="toast-con">
			确定要放弃本次支付吗？
		</view>
		<view class="toast-btns">
			<text @click="backFun">放弃支付</text>
			<text @click="retypePay">继续支付</text>
		</view>
	</view>
</view>

所用到的函数代码如下：

retypePay(){
    
	this.toastFlag = false;
	this.backFlag = false;
},
backFun(){
    
	this.backFlag = false;
	this.giveUp = true;
	uni.navigateBack();
},

弹窗css样式如下：

.tanchuang{
    
	position: fixed;
	bottom:0;
	left:0;
	top:0;
	right:0;
	background:rgba(0,0,0,.4);
	.toast{
    
		position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
		width:560upx;
		height:424upx;
		background:#fff;
		text-align: center;
		border-radius: 10upx;
		overflow: hidden;
		.toast-btns{
    
			position: absolute;
			bottom:0;
			left:0;
			width:100%;
			height:80upx;
			line-height: 80upx;
			border-top:1px solid #EEEEEE;
			color:#9A9A9A;
			font-size:30upx;
			display: flex;
			align-items: center;
			text{
    
				flex:1;
				text-align: center;
			}
			text:last-child{
    
				color:#FF4C4C;
				border-left:1px solid #EEEEEE;
			}
		}
		.toast-btn{
    
			width:490upx;
			height:70upx;
			line-height: 70upx;
			background:#FF4C4C;
			border-radius: 10upx;
			color:#fff;
			font-size:30upx;
			margin:0 auto;
		}
		.toast-con{
    
			height:232upx;
			width:450upx;
			margin:0 auto;
			text-align: left;
			padding:0 20upx;
			box-sizing: border-box;
			font-size:26upx;
			color:#343434;
			line-height: 40upx;
			display: flex;
			align-items: center;
		}
		.toast-tit{
    
			height:80upx;
			line-height: 80upx;
			background:linear-gradient(to right,#FF4C4C,#FF9A6C);
			font-size:30upx;
			color:#fff;
		}
	}
}

本文链接：https://blog.csdn.net/yehaocheng520/article/details/108990748

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

demosaicv2.0--vga彩条信号的生成_vivado demosaic_waiting不是违停的博客-程序员秘密

先写个点灯模块，然后在顶层模块调用顶层模块暂时需要rst和clk但是示例文档里面却有四个时钟查看四个时钟信号的原理图B3B和B4AB5B和B8A应该是电平转换的作用，3.3V工作下翻转时间最大为3到4ns，而50M时钟，周期是20ns，够用OSC_50来自于50M晶振OSC_50_OUT2来自于25M晶振，经过SI5338Q（内含PLL）输出变成50M不知道为什么要这么多时钟，下载了手册Cyclone V Device Handbook Volume 1: Device In...

python书籍推荐——从入门到进阶_普通网友的博客-程序员秘密

1、[Python Cookbook, Third edition, by David Beazley and Brian K. Jones]python cookbook适合中阶的程序员。它囊括了很多时新的编程任务。书中的代码示例都是python3写的，而且还详细的解释了这些代码的作用。书里面包括有数据编码、数据结构、算法、元编程、并发编程等等内容。我个人读这本书的习惯是先大致过一遍书里面的内容，搞清楚每一个大章节的功能。具体用到的时候，再仔细研读一遍里面的内容，书里面对每一句代码都有详细的解释，如果直

Python基础知识：构造函数中self用法_普通网友的博客-程序员秘密

在Python开发（http://www.maiziedu.com/course/python-px/）编程语言中有种函数叫构造函数，在这个函数里面有一个关键词叫self，首先明确的是self只有在类的方法中才会有，独立的函数或方法是不必带有self的。下面就讲讲self关键词在构造函数中的使用方法。构造class FooBar: def _int_(self): self

SAP-ABAP-FPM 创建FPM_开发一个简单的FPM应用_abap fpm_Dylan_ludi的博客-程序员秘密

FPM作为SAP完善的WEB框架，对传统的WDA进行了封装，使得开发过程简单稳定且标准化。常见的框架有OVP, OIF, GAF几种，对概念感兴趣的同学可以研读专业的介绍文档，我们这里只介绍较为常用的OVP的简单创建流程1.在SAP中，启动事务码: FPM_WB 进到配置界面，如下图2.点击这里进行创建3.填上应用的名字和描述并选上我们文初说到的，OVP-概览页面4.点击下一步，分配包，传输请求之后，我们就可以进一步编辑配置了5.这里可以配置第一个页面的页面标识，标题

Windows核心编程（六）_老火的博客-程序员秘密

十三、Windows内存体系结构每个进程都有自己的虚拟地址空间，对32位进程来说，这个地址空间大小为4GB ＝ 2^32。对于64位地址来说，大小为16EB＝2^64。每个进程的虚拟地址空间被划分为许多分区，Windows内核不同分区略有变化，以X86 32位Windows为例，0x00000000~0x0000FFFF为空指针赋值分区；0x00010000~0x7FFFFFFFF

db2开发人员必读之---DB2中多种常用功能的解决方法_cuishuobi4947的博客-程序员秘密

DB2中多种常用功能的解决方法【导读】描述了多种常用功能的解决方法，而这些功能并不完全符合关系誓约。简介关系模型是一件美好事物。对它妥协是牵强附会，就象给米开朗琪罗的大卫扣上一顶棒球帽一样。然而，不属于纯关系模型的事物可能...

随便推点

timer_second_mengfanteng的博客-程序员秘密

#include #include #include #include #include #include #include #include #include #include #include #include /*°üÀ¨timer.hÍ·ÎÄ¼þ*/#include #define SECOND_MAJOR 252 /*Ô¤ÉèµÄsecondµÄÖ÷É

python的numpy.prod函数运行实例详解_wyx100的博客-程序员秘密

官网numpy.prod 数据乘法

SpringBoot中的Transaction研究（三）TransactionInterceptor_norollbackruleattribute_首席IT民工的博客-程序员秘密

文章目录概略详细研究PlatformTransactionManager的情况prepareTransactionInfoTransactionInfo.bindToThreadcompleteTransactionAfterThrowingcleanupTransactionInfo概略站在全局的角度来看如下图，TransactionInterceptor借助于AOP使用TransactionManager实现了事务，主要是完成了try-catch语法。整个操作的核心代码是在TransactionA