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

一、需求

在使用uniapp开发小程序时,在【个人中心页面】-点击【我的推广】按钮进入详情页面时,要求出现【会员协议通知】的弹窗,并且有【确认和取消】两个按钮,

如果点了【取消】按钮,直接退出该页面,并且下次进入该详情时,弹窗会再次弹出;

只有点了【确认】按钮,弹窗将不再弹出;

二、代码实现

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

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

html 复制代码
	<!--弹窗-->
	<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>

完成~

相关推荐
汤姆yu3 小时前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序
雪芽蓝域zzs3 小时前
uniapp 国密sm2加密
uni-app
说私域10 小时前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
说私域12 小时前
传统微商困境与开源链动2+1模式、AI智能名片及S2B2C商城小程序的转型破局
人工智能·小程序·开源
一渊之隔12 小时前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
打不着的大喇叭13 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
zengzehui13 小时前
uniapp启动图被拉伸问题
uni-app
iOS阿玮16 小时前
AppStore教你一招免备案的骚操作!
uni-app·app·apple
racerun16 小时前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序
XM-545816 小时前
2025微信小程序wxapkg解包全攻略
linux·运维·小程序