uniapp开发微信小程序初次加载弹窗显示隐私政策

2023-11-05

效果图:

 

废话不多说,直接上代码:

<uni-popup
			ref="uPopup"
			:mask-click="false"
			type="center">
			<view class="agreement-view" :style="{ width: scrollWidth * 0.80 + 'px', height: scrollHeight * 0.70 + 'px' }">
				<!-- 弹框提示头 -->
				<view class="u-text-center">用户使用须知</view>
				<scroll-view scroll-y class="agreement-content" :style="{ height: (scrollHeight - 110) * 0.70 + 'px' }">
					您描述的内容
				</scroll-view>
				<view class="agreement-btns" :style="{ height: (scrollHeight*0.7 - (scrollHeight - 120) * 0.70) - 42 + 'px' }">
					<navigator class="no-btn text" target="miniProgram" open-type="exit">
						暂不使用
					</navigator>
					<view class="yse-btn text" @tap="admit">同意</view>
				</view>
			</view>
		</uni-popup>

 声明变量

data() {
			return {
				// 内容的高度
				scrollWidth: uni.getSystemInfoSync().windowWidth,
				scrollHeight: uni.getSystemInfoSync().windowHeight,
			}
		}

初始化加载及函数操作

mounted() {
			this.judge();
		},
methods: {
			// 初始化的时候调用参数,判断用户是否第一次进入
			judge() {
				uni.getStorage({
					key:'agreement_key',
					success: () => {
						// 获取到了不显示弹窗
						this.$refs.uPopup.close();
						uni.showTabBar({
							animation: true
						})
					},
					fail: () => {
						uni.hideTabBar({
							animation: true
						})
						this.$refs.uPopup.open('center');
					}
				})
			},
			// 同意按钮
			admit() {
				try{
					uni.setStorageSync('agreement_key', 'yes');
					uni.setStorageSync('agreement_Date', new Date().toLocaleString())
				}catch(e){
					//TODO handle the exception
				}
				this.$refs.uPopup.close();
				uni.showTabBar({
					animation: true
				})
			},
}

css样式:

.line{
	/* line-height: 18px; */
	font-family:Arial,Helvetica,sans-serif;
	font-size:1em;
	vertical-align:middle;
	font-weight:normal
}
.agreement-view{
	margin-top: 20px;
	box-shadow: 0 5rpx 20rpx 0rpx rgba(0, 0, 150, .2);
	border-radius: 20rpx;
	padding: 20rpx 0rpx 0rpx 0rpx;
	display: flex;
	flex-direction: column;
	width: 300px;
	height: 400px;
	align-items: center;
	/* justify-content: center; */
	background-color: #fff;
}
.u-text-center{
	font-size: 15px;
	padding-bottom: 20rpx;
	font-family:Arial,Helvetica,sans-serif;
	font-weight: 600;
	width: 100%;
	height: 30px;
	text-align: center;
}
.agreement-content{
	overflow-y: scroll;
	padding: 0rpx 20rpx 10rpx 20rpx;
}
.agreement-btns{
	width: 100%;
	/* height: 85rpx; */
	display: flex;
	flex-direction: row;
}
.yse-btn{
	color: #fff;
	background-color: red;
	flex: 1;
	text-align: center;
	width: 100%;
	height: 100%;
	border-radius: 0 0 20rpx 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.no-btn{
	/* background-color: aquamarine; */
	flex: 1;
	text-align: center;
	width: 100%;
	height: 100%;
	border-radius: 0 0 0 20rpx;
}
.text{

	line-height: 46px;
}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

uniapp开发微信小程序初次加载弹窗显示隐私政策 的相关文章

  • MQ 消息丢失、重复、积压问题,如何解决?

    MQ是面试中比较高频的问题 下面分享下MQ的常见问题 面试官在面试候选人时 如果发现候选人的简历中写了在项目中使用了 MQ 技术 如 Kafka RabbitMQ RocketMQ 基本都会抛出一个问题 在使用 MQ 的时候 怎么确保消息
  • Objective-C非正式协议和分类的区别

    当一个项目需要使用到一些通用的方法 这些方法需要在多个类中使用 那么我们就可以使用非正式协议来定义这些方法 以便于多个类之间共享这些方法 比如 我们可以定义一个名为 Utilities 的非正式协议 并在其中定义一些通用的方法 比如 Uti
  • 最大熵模型

    1 什么是最大熵原理 例子1 假设随机变量X有5个取值 A B C D E 要估计各个值的概率P A P B P E 这些概率值满足条件P A P B P C P D P E 1 但是满足这个条件的概率分布有无数个 如果没有其他信息 一个可
  • vue项目打包及配置跨域

    一 配置 proxy 跨域 module exports devServer open true 自动启动浏览器 host localhost localhost port 8080 端口号 hotOnly false 热更新 overla
  • python四行代码生成“年月日”格式的日期列表序列

    代码如下 import pandas as pd start 20110101 end 20161231 dates pd date range start end strftime Y m d to list 代码运行结果如下 需要说明的
  • 使用Typora将Markdown内容导出为Word(.docx)

    使用Typora将Markdown内容导出为Word docx 操作步骤 01 下载并安装Typora 自行前往Typora官网下载 傻瓜式安装 此处就不再做多余的解释 02 安装Pandoc 2 1 pandoc官网下载 真不知道怎么从这
  • Mongodb 定义model中的某个属性 保存任意类型

    参考 Mongoose5 0 文档http www mongoosejs net docs schematypes html 一个啥都可以放的 SchemaType 虽然便利 但也会让数据难以维护 Mixed 可以通过 Schema Typ
  • Spring @Scheduled @Async联合实现调度任务

    定时任务之前一直用的是quartz之类 但是注意到Spring中其实也提供了一种简单的调度注释 Scheduled 也就想尝一下鲜 代码示意如下 Component EnableScheduling public class AsyncTa

随机推荐

  • C++ primer plus 第六版 第十一章 复习题

    第十一章 复习题 1 Stonewt Stonewt operator double n const Stonewt result double total stn Lbs per stn n lbs n result stn total
  • RabbitMQ(三)手动Ack确认

    默认情况下 spring boot data amqp 是自动ACK机制 就意味着 MQ 会在消息发送完毕后 自动帮我们去ACK 然后删除消息的信息 这样依赖就存在这样一个问题 如果消费者处理消息需要较长时间 最好的做法是消费端处理完之后手
  • javascript enval()函数与JSON 之间关系

    概念定义 eval 函数可计算某个字符串 并执行其中的的 JavaScript 代码 enval 函数将把最后一个表达式或者语句所包含的值或引用作为返回值 举例说明一 eval javascrit表达式
  • 关于召开“CIE2019第三届中国IT教育论坛”的通知

    各相关高校 伴随着人工智能 智能制造 云计算 虚拟现实 5G等新技术的发展与日益成熟 全球范围内的新科技革命悄然打响 新一轮科技革命正在重塑世界竞争格局 以新技术 新业态 新产业为特点的新经济蓬勃发展 我国急需培养一批集学科 技术和产业思维
  • ubuntu18.04下mysql数据库安装和C语言连接操作

    数据库在应用系统开发中很常见 在众多的数据库中 mysql总是会占有一席之地 本篇说明一下如何在ubuntu18 04上安装mysql数据库 目录 1 更新环境 2 安装mysql数据库系统 3 检测是否安装成功 4 启动 重启 关闭 删除
  • CLion用于STM32开发

    最近想要复现稚晖君的ElectronBot 发现32的代码用的CLion编写的 而且是C和C 混编的 本来想着用keil再写一个 但是有点浪费时间 而且发现CLion学生可以白嫖 反正以后都要学习C 所以现在就装上吧 注 最终的效果只能下载
  • 克服过拟合和提高泛化能力的20条技巧和诀窍

    克服过拟合和提高泛化能力的20条技巧和诀窍 你是如何提升深度学习模型的效果 这是我经常被问到的一个问题 有时候也会换一种问法 我该如何提高模型的准确率呢 或者反过来问 如果我的网络模型效果不好 我该怎么办 通常我的回答是 具体原因我不清楚
  • 数据结构——查找

    一 查找的基本概念 查找 在数据集合中寻找满足某种条件的数据元素的过程称为查找 查找表 查找结构 用于查找的数据集合称为查找表 它由同一类型的数据元素 或记录 组成 关键字 数据元素中唯一标识该元素的某个数据项的值 使用基于关键字的查找 查
  • 智能合约安全分析,假充值攻击如何突破交易所的防御?

    智能合约安全分析 假充值攻击如何突破交易所的防御 引言 假充值攻击 是指攻击者通过利用交易所在处理充值过程中的漏洞或系统错误 发送伪造的交易信息到交易所钱包地址 这些伪造的交易信息被交易所误认为是真实的充值请求 并将对应的数字资产或货币添加
  • javascript判断数组和对象中是否存在某元素

    javascript判断数组和对象中是否存在某元素 判断数组 是否存在某个元素 可以用数组的indexOf函数 方法arr indexOf find start find 要找的内容 必须 start 查找开始下标 可选 返回 查找数据所在
  • 【Python】os.path.expanduser() 函数的理解和举例说明

    文章目录 一 函数说明 二 实例说明 一 函数说明 os path expanduser 是 Python 中 os path 模块中的一个函数 用于将路径字符串中的波浪线 扩展为用户的主目录 它的作用是提供跨平台的路径展开功能 使得路径可
  • HTML入门

    web前端 前端开发也叫web前端开发 它指的是基于web的互联网产品的页面 也可叫做界面 开发及功能开发 1 认识HTML HTML是Hyper Text Markup Language 超文本标记语言 的缩写 是构成web页面的基本元素
  • git clone 出现fatal: unable to access ‘https://github.com/xxx: Failed to connect to github.com

    问题描述 使用git clone命令时 出现如下错误 fatal unable to access https github com xxx Failed to connect to github com port 443 Timed ou
  • 多版本 Python 使用 pip 安装 package

    最简单的方式 使用参数指定安装路径 pip install t D python3 5 32bit Lib site packages numpy 叨叨叨 如果电脑上安装了多个版本的Python的话 在需要使用pip安装新package时
  • hive分区表的元数据信息numRows显示为0

    创建分区表 CREATE TABLE dept partition deptno int dname string loc string PARTITIONED BY
  • 2023牛客暑期多校训练营3

    A World Fragments I 将两个二进制数先转换成十进制数 因为只要二进制中有1 就加或减1 加减0是没有用的 所以求两个二进制的差的绝对值 这是在有1的情况下 其实只要不等于0就有1 数是非负整数 所以需要特判 如果第一个二进
  • 10种基于MATLAB的方程组求解方法

    线性方程组的求解包括直接法和迭代法 其中迭代法包括传统的高斯消元法 最速下降法 牛顿法 雅克比迭代法 共轭梯度法 以及智能启发式算法求解法和神经网络学习算法 传统算法可以相互组合改进 智能仿生启发式算法包括粒子群算法 遗传算法 模拟退火算法
  • R329-opencv阈值分割算法——自适应阈值

    R329 opencv阈值分割算法 自适应阈值 在不均匀照明或者灰度值分布不均的情况下 如果使用全局阈值分割 那么得到的分割效果往往会很不理想 这个时候就要你用到自适应阈值算法了 OpenCV提供了自适应的二值化函数 通过该函数可以对图像的
  • 如何使用网页版微信文件传输助手(图解教程)

    微信文件传输助手网页版是一款非常方便的工具 可以帮助我们在电脑和手机之间传输文件 而且不需要电脑登录微信即可传输文件 下面是具体的操作步骤 步骤一 打开多御浏览器 点击微信文件传输助手 然后使用微信扫描页面上的二维码 即可进入微信传输助手界
  • uniapp开发微信小程序初次加载弹窗显示隐私政策

    效果图 废话不多说 直接上代码