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

一、需求

在使用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>

完成~

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

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

相关文章

如何在极狐GitLab 使用Docker 仓库功能

本文作者&#xff1a;徐晓伟 GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 本文主要讲述了如何在[极狐GitLab…

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

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

官网下载IDE插件并导入IDE

官网下载IDEA插件并导入IDEA 1. 下载插件2. 导入插件 1. 下载插件 地址&#xff1a;https://plugins.jetbrains.com/plugin/21068-codearts-snap/versions 说明&#xff1a;本次演示以IDEA软件为例 操作&#xff1a; 等待下载完成 2. 导入插件 点击File->setting->Pl…

HTML和markdown

总体情况 <p>在html的用处 在vscode中使用markdown [Markdown] 使用vscode开始Markdown写作之旅 - 知乎

STL库 —— list 的编写

目录 一、成员变量 ​编辑 二、push_back 函数 三、迭代器 iterator 3.1 iterator 结构体 3.2 begin() 与 end() 函数 3.3 iterator 运算符重载 3.4 -> 的重载 3.5 const_iterator 四、测试代码 五、修饰符成员 5.1 insert 函数 5.2 erase 函数 5.3 push 函数…

【Ubuntu】update-alternatives 命令详解

1、查看所有候选项 ​​​​​​​sudo update-alternatives --list java 2、​​​​​​​更换候选项 sudo update-alternatives --config java 3、自动选择优先级最高的作为默认项 sudo update-alternatives --auto java 4、删除候选项 sudo update-alternatives --rem…

Netty 入门应用之Http服务WebSocket

Netty实现Http服务 主要的变化是在初始化器中引入了新的编解码器 一些创建的类作用和Netty HelloWorld的小demo一样我这里就不再次重复了 1、Http服务端代码 public class HttpServer {public static void main(String[] args) {// 创建Reactor// 用来管理channel 监听事件 …

FME学习之旅---day22

我们付出一些成本&#xff0c;时间的或者其他&#xff0c;最终总能收获一些什么。 教程&#xff1a;栅格入门 FME 支持读取和写入 70 多种栅格格式。本教程将介绍几个基本示例&#xff0c;展示如何使用 FME 读取、转换和写入栅格数据。 FME 数据检查器不应用任何对比度增强。因…

实战项目——智慧社区(一)

1、项目介绍 系统功能 登录、修改密码、登出 &#xff08;1&#xff09;首页 &#xff08;1.1&#xff09;数据统计&#xff1a;小区人员统计对比图&#xff0c;占比图 &#xff08;2&#xff09;物业管理 &#xff08;2.1&#xff09;小区管理&#xff1a;小区数据的增删改…

centos 7.9 nginx本地化安装,把镜像改成阿里云

1.把centos7.9系统切换到阿里云的镜像源 1.1.先备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup1.2.下载新的CentOS-Base.repo配置文件 wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo特别…

Redux和Redux Toolkit

Redux 概念&#xff1a;redux是react最常用的集中状态管理工具&#xff0c;类似于Vue中的Pinia(vuex)&#xff0c;可以独立于框架运行作用&#xff1a;通过集中管理的方式管理应用的状态 Redux快速体验 不和任何框架绑定&#xff0c;不使用任何构建工具&#xff0c;使用纯Re…

uniapp小程序编译报错

说明 微信小程序编译每次都出现[ project.config.json 文件内容错误] project.config.json: libVersion 字段需为 string, 解决 找到manifest.json文件 添加&#xff1a;"libVersion": "latest"&#xff0c;重新编译即可。

MySQL limit N offset M 速度慢?来实际体验下

直接开始 有一张表&#xff1a;trade_user&#xff0c;表结构如下&#xff1a; mysql> desc trade_user; ------------------------------------------------------------------ | Field | Type | Null | Key | Default | Extra | -------------…

记一次IP访问MySQL失败多次被自动锁定导致无法连接问题,解决方法只需一条SQL。

&#x1f469;&#x1f3fd;‍&#x1f4bb;个人主页&#xff1a;阿木木AEcru &#x1f525; 系列专栏&#xff1a;《Docker容器化部署系列》 《Java每日面筋》 &#x1f4b9;每一次技术突破&#xff0c;都是对自我能力的挑战和超越。 前言 今天下午还在带着耳机摸鱼&#xff…

Linux CentOS 安装 MySQL 服务教程

Linux CentOS 安装 MySQL 服务教程 1. 查看系统和GNU C库(glibc)版本信息 1.1 查询机器 glibc 版本信息 glibc&#xff0c;全名GNU C Library&#xff0c;是大多数Linux发行版中使用的C库&#xff0c;为系统和应用程序提供核心的API接口。在Linux系统中&#xff0c;特别是在…

动态规划-入门理解

一、什么情况可以使用动态规划 动态规划 最优子结构 重叠子问题 转移方程 最优子结构&#xff1a;保证能从局部解推出全局解&#xff0c;也就是保证能够写出转移方程 重叠子问题&#xff1a;说明暴力解法太耗时&#xff0c;我们可以使用动态规划进行优化 转移方程&#xff…

自用---

零、环境配置 keil代码补全 keil pack包 cubemx配置安装包 一、LED cubemx配置PD2引脚为输出模式 uint16_t led_value 0x00; void led_set(uint8_t led_dis) {HAL_GPIO_WritePin(GPIOC,GPIO_PIN_All,GPIO_PIN_SET);HAL_GPIO_WritePin(GPIOC,led_dis<<8,GPIO_PIN_R…

03-JAVA设计模式-桥接模式

桥接模式 什么是桥接模式 桥接模式&#xff08;Bridge Pattern&#xff09;是一种将抽象与实现解耦的设计模式&#xff0c;使得二者可以独立变化。在桥接模式中&#xff0c;抽象部分与实现部分通过一个桥接接口进行连接&#xff0c;从而允许抽象部分和实现部分独立演化。 场…

服务器docker应用一览

文章目录 一、简单需求二、业务流程三、运行效果四、实现过程1. 前提2. 源码3.核心代码4. 项目打包5、部署 一、简单需求 现有某云主机服务器&#xff0c;用来做项目演示用&#xff0c;上面运行了docker应用&#xff0c;现希望有一总览页面&#xff0c;用来展示部署的应用。 …

微信小程序实现输入appid跳转其他小程序

前言 本文记录wx.navigateToMiniProgram打开另一个小程序API使用方法&#xff0c;并封装为组件。 wxml 部分 输入框用来记录appid&#xff0c;按钮用来查询并跳转。 <view class"container"><input class"input" placeholder"请输入要查…