uniapp开发小程序,通过缓存的方式,判断页面只弹出一次弹窗通知

news/2024/7/20 1:31:09 标签: uni-app, 小程序

一、需求

在使用uniapp开发小程序时,在【个人中心页面】-点击【我的推广】按钮进入详情页面时,要求出现【会员协议通知】的弹窗,并且有【确认和取消】两个按钮,
如果点了【取消】按钮,直接退出该页面,并且下次进入该详情时,弹窗会再次弹出;
只有点了【确认】按钮,弹窗将不再弹出;
在这里插入图片描述

在这里插入图片描述

二、代码实现

1.在个人中心页面的按钮添加点击-跳转事件

2.在详情页面:(通过缓存的方式进行判断)

	<!--弹窗-->
	<view class="modelbg" v-if="showPopup == true"></view>
		<view class="mymodel" v-if="showPopup == true">
			<view class="tit">会员推广及代理协议</view>
			<view class="con" v-html="memberDesc"></view>
			<view class="btnbox">
				<view class="quxiao" @click="quxiao">取消</view>
				<view class="sure" @click="sure">确定</view>
			</view>
		</view>

<script>		
	data() {
		return {
			showPopup: false, // 控制弹出层显示的变量
			memberDesc: ''
		};
	},

	onShow() {
			//设置弹窗只提示一次
			if (!uni.getStorageSync('popupShown')) {
				this.showPopup = true;
				uni.setStorageSync('popupShown', true); // 设置弹窗已显示
			}
	},
	
	methods: {
			//取消
			quxiao() {
				uni.removeStorageSync('popupShown'); 
				uni.navigateBack()
			},
			
			//确认
			sure() {
				this.showPopup = false
			},
	}
</script>

<style  scoped lang="scss">
.modelbg {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.7);
	}

	.mymodel {
		width: 90%;
		height: 70%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		background-color: #fff;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		margin: auto;

		.tit {
			text-align: center;
			font-weight: bold;
			font-size: 30rpx;
		}

		.con {
			height: 88%;
			overflow-y: auto;
		}

		.btnbox {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			view {
				width: 50%;
				text-align: center;
				color: #fff;
				padding: 24rpx;
				box-sizing: border-box;
				font-weight: bold;
				letter-spacing: 2rpx;
			}

			.quxiao {
				background-color: #ccc;
				border-radius: 10rpx 0 0 10rpx;
			}

			.sure {
				background-color: var(--view-theme);
				border-radius: 0 10rpx 10rpx 0;
			}
		}
	}
</style>

完成~


http://www.niftyadmin.cn/n/5480770.html

相关文章

用html实现一个动态的文字框

<!DOCTYPE html> <html lang"en" > <head><meta charset"UTF-8"><title>一个动态的文字框动画</title><link rel"stylesheet" href"./style.css"></head> <body> <link rel…

在 CentOS 7 上安装 Redis

在 CentOS 7 上安装 Redis 可以通过几个简单的步骤完成。以下是一种常用的方法&#xff1a; 更新系统&#xff1a; 在安装任何新软件之前&#xff0c;最好先更新系统的软件包列表&#xff0c;以确保安装的软件版本是最新的。可以使用以下命令来更新&#xff1a; sudo yum up…

电商技术揭秘十八:电商平台的云计算与大数据应用小结

电商技术揭秘相关系列文章 电商技术揭秘一&#xff1a;电商架构设计与核心技术 电商技术揭秘二&#xff1a;电商平台推荐系统的实现与优化 电商技术揭秘三&#xff1a;电商平台的支付与结算系统 电商技术揭秘四&#xff1a;电商平台的物流管理系统 电商技术揭秘五&#xf…

Coding and Paper Letter(八十九)

CPL之第八十九期。 1 Coding: 1.openai通用代理转换是一个用于将其他厂商服务转为openai 标准接口相应的工具. 通过该工具, 可以将其他厂商的服务转为openai 标准接口. 讯飞星火,通义千问,gemini,openai,copilot,double&#xff0c;kimi&#xff0c;智谱清言 使用spring2webf…

小程序打开空白的问题处理

小程序打开是空白的&#xff0c;如下&#xff1a; 这个问题都是请求域名的问题&#xff1a; 一、检查服务器域名配置了 https没有&#xff0c;如果没有&#xff0c;解决办法是申请个ssl证书&#xff0c;具体看这里 https://doc.crmeb.com/mer/mer2/4257 二、完成第一步后&#…

第1章、react基础知识;

一、react学习前期准备&#xff1b; 1、基本概念&#xff1b; &#xff1b; &#xff1b; 二、react jsx语法&#xff1b; 三、react元素渲染&#xff1b; 四、react组件基础之创建组件&#xff1b; 五、react props属性&#xff1b; 六、react state 状态&#xff1b;…

wpf下如何实现超低延迟的RTMP或RTSP播放

技术背景 我们在做Windows平台RTMP和RTSP播放模块对接的时候&#xff0c;有开发者需要在wpf下调用&#xff0c;如果要在wpf下使用&#xff0c;只需要参考C#的对接demo即可&#xff0c;唯一不同的是&#xff0c;视频流数据显示的话&#xff0c;要么通过控件模式&#xff0c;要么…

[react] useEffect详解

参考文档:useEffect – React 中文文档 1.基本用法 有些组件需要与网络、某些浏览器 API 或第三方库保持连接&#xff0c;当它们显示在页面上时。这些系统不受 React 控制&#xff0c;所以称为外部系统。 要 将组件连接到某个外部系统&#xff0c;请在组件的顶层调用 useEffec…