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

news2025/6/25 9:16:35

一、需求

在使用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.coloradmin.cn/o/1584313.html

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

相关文章

怎么快速围绕“人、货、场”做零售数据分析?

做零售数据分析多了&#xff0c;不难发现零售数据分析的关键就是“人、货、场”&#xff0c;那么怎么又快又灵活地分析这三个关键点&#xff1f;不妨参考下奥威BI零售数据分析方案。 奥威BI零售数据分析方案是一套吸取大量项目经验&#xff0c;结合零售企业数据分析共性需求打…

HWOD:走方格的方案数

一、自己的解题思路 1、(0,m)和(n,0) (0,m)表示处在棋盘的左边线&#xff0c;此刻能回到原点的路线只有一个&#xff0c;就是一路向上 (n,0)表示处在棋盘的上边线&#xff0c;此刻能回到原点的路线只有一个&#xff0c;就是一路向左 2、(1,1) (1,1)表示只有一个方格&#…

多协议接入视频汇聚EasyCVR平台vs.RTSP安防视频EasyNVR平台:设备分组的区别

EasyCVR视频融合云平台则是旭帆科技TSINGSEE青犀旗下支持多协议接入的视频汇聚融合共享智能平台。平台可支持的接入协议比EasyNVR丰富&#xff0c;包括主流标准协议&#xff0c;有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海…

C语言比较两个字符串是否相等是很容易的

一、概要 两个字符串char str1[n]和char str2[n] while循环&#xff0c;开始前i置为0&#xff0c;如果两个字符串都没有到末尾&#xff0c;且str1[i]str2[i]&#xff0c;则i&#xff0c;循环继续 循环结束之后&#xff0c;如果两个字符串都到了末尾(str1[i]\0 &&…

java Web课程管理系统用eclipse定制开发mysql数据库BS模式java编程jdbc

一、源码特点 JSP 课程管理系统是一套完善的web设计系统&#xff0c;对理解JSP java 编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,eclipse开发&#xff0c;数据库为Mysql5.0&#xff0c;使用ja…

废品回收 小程序+APP

用户实名认证、回收员实名认证、后台审核、会员管理、回收员管理、订单管理、提现管理、地图、档案管理。 支持&#xff0c;安卓APP、苹果APP、小程序 流程&#xff1a; 一、用户端下单&#xff0c;地图选择上门位置、填写具体位置、废品名称、预估重量、选择是企业废旧、家…

CSS 基础:border 的 3 个基础属性和简写方法

你好&#xff0c;我是云桃桃。 一个希望帮助更多朋友快速入门 WEB 前端的程序媛。大专生&#xff0c;一枚程序媛&#xff0c;感谢关注。回复 “前端基础题”&#xff0c;可免费获得前端基础 100 题汇总&#xff0c;回复 “前端工具”&#xff0c;可获取 Web 开发工具合集 264篇…

labelImg将图像标签显示到界面

打开View的显示类别 但是颜色不够清晰&#xff0c;我想自己定制 我的象棋红色和黑色两种。并且把字体方法一些。 可以看到 color self.select_line_color if self.selected else self.line_color参考&#xff1a;https://blog.csdn.net/qq_41082953/article/details/10330225…

ppt从零基础到高手【办公】

第一章&#xff1a;文字排版篇01演示文稿内容基密02文字操作规范03文字排版处理04复习&作业解析第二章&#xff1a;图形图片图表篇05图形化表达06图片艺术化07轻松玩转图表08高效工具&母版统一管理09复习&作业解析10轻松一刻-文字图形小技巧速学第三章&#xff1a;…

【Web开发】jquery图片放大镜效果制作变焦镜头图片放大

jquery图片放大镜效果制作变焦镜头图片放大实现 整体步骤流程&#xff1a; 1. 前端html实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"…

uniapp 卡片勾选

前言 公司的app项目使用的uniapp&#xff0c;项目里有一个可勾选的卡片功能&#xff0c;效果图如下&#xff1a; 找了一圈没找到什么太好的组件&#xff0c;于是就自己简单写了一个&#xff0c;记录一下。避免以后还会用到 代码 <template><view class"card-…

如何训练自己的ChatGPT?需要多少训练数据?

近年&#xff0c;聊天机器人已经是很常见的AI技术。小度、siri、以及越来越广泛的机器人客服&#xff0c;都是聊天机器人的重要适用领域。然而今年&#xff0c;ChatGPT的面世让这一切都进行到一个全新的高度&#xff0c;也掀起了大语言模型&#xff08;LLM&#xff09;的热潮。…

CMake 学习笔记2

其他很好的总结 CMake教程系列-01-最小配置示例 - 知乎 1、基本关键字 MESSAGE关键字 向终端输出用户自定义的信息 主要包含三种信息 SEND_ERROR&#xff0c;产生错误&#xff0c;生成过程被跳过STATUS,输出前缀--的信息&#xff0c;MESSAGE(STATUS "this is binary…

【nodejs基础学习三-浏览器偏好设置】

系列文章目录 第一章 nodejs基础学习–注释、变量、运算符、字符串、函数&#xff08;一&#xff09; 第二章 nodejs基础学习–循环、对象字符、模块导入出&#xff08;二&#xff09; 第三章 nodejs基础学习三-浏览器设置 系列文章目录一、开发者模式二、web偏好设置 一、开发…

LinuxAndroid: 旋转编码器input输入事件适配(旋转输入)

rk3588s: 旋转编码器input输入事件适配 基于Android 12 kernel-5.10版本 参考文档&#xff1a; https://blog.csdn.net/szembed/article/details/131551950 Linux 输入设备调试详解&#xff08;零基础开发&#xff09;Rotary_Encoder旋转编码器驱动 通用GPIO为例 挂载input输…

【mT5多语言翻译】之一——实战项目总览

[1] 总览 【mT5多语言翻译】系列共六篇文章&#xff1a; 【mT5多语言翻译】之一——实战项目总览   【mT5多语言翻译】之二——模型&#xff1a;T5模型与mT5模型与前置知识   【mT5多语言翻译】之三——数据集&#xff1a;多语言翻译数据集与预处理   【mT5多语言翻译】之…

Java使用aspose-words实现word文档转pdf

Java使用aspose-words实现word文档转pdf 1.获取转换jar文件并安装到本地maven仓库 aspose-words-15.8.0-jdk16.jar包下载地址&#xff1a;https://zhouquanquan.lanzn.com/b00g257yja 密码:965f 下载aspose-words-15.8.0-jdk16.jar包后&#xff0c;通过maven命令手动安装到本…

报修小程序怎么建立?维修服务行业的智能化升级

在这个数字化飞速发展的时代&#xff0c;维修服务行业也在经历着前所未有的变革。消费者对于服务的期待不再局限于传统的电话预约或线下等待&#xff0c;而是希望能够通过更加智能、便捷的途径解决日常生活中的维修问题。在这样的背景下&#xff0c;报修小程序应运而生&#xf…

SAAS医院管理系统总结

时间很久了&#xff0c;颗粒归仓的重要性 再次体现&#xff0c;经历即成长 兼职也能学到东西 boot web mybatis-plus dynamic-datasource druid pagehelper必须的啦 shiro devtools没必要 软件供应商 给客户提供服务的形式&#xff1a; SAAS&#xff1a;软件即服务&#xf…

Github Benefits 学生认证/学生包 新版申请指南

本教程适用于2024年之后的Github学生认证申请&#xff0c;因为现在的认证流程改变了很多&#xff0c;所以重新进行了总结这方面的指南。 目录 验证教育邮箱修改个人资料制作认证文件图片转换Base64提交验证 验证教育邮箱 进入Email settings&#xff0c;找到Add email address…