【样式】两个弹出框 u-popup uniapp uview2

这段代码展示了如何在Vue.js应用中使用uview2popup组件来创建一个支付方式选择的弹窗,包括扫码支付、现金支付、储值扣款和商城收款,用户可以点击选择支付方式并输入金额,点击确认支付后会显示付款码弹窗。

在这里插入图片描述
uview2 popup官网

<template>
	<view class="">

			<u-popup :show="show" @close="close" :round="10" closeable :closeOnClickOverlay='false'>
				<view class="pop">
						<view class="title">选择支付方式</view>	
						<view class="popitem flex_align_center">
							<view class="flex_align_center" @click='payFun(1)'>
							<image src="@/static/images/choosed.png" mode="" class="cimg" v-if="payItem == 1"></image>
							<image src="@/static/images/choose.png" mode="" class="cimg" v-else></image>
							<image src="@/static/images/pay1.png" mode="" class="paymg1"></image>
							<text class="text">扫码支付</text>
							</view>
							<view class="intp flex_align_center">
								<text></text>
								<input class="uinput" type='number' placeholder="请输入付款金额" />
							</view>	
						</view>	
						<view class="popitem flex_align_center">
							<view class="flex_align_center" @click='payFun(2)'>
								<image src="@/static/images/choosed.png" mode="" class="cimg" v-if="payItem == 2"></image>
								<image src="@/static/images/choose.png" mode="" class="cimg" v-
### 解决方案 为了使 `u-popup` 组件能够适配不同设备的顶部安全区域,在 UniApp 中可以通过 CSS 和 JavaScript 动态调整窗的位置。具体方法如下: #### 方法一:使用 Safe Area 插槽 uView 提供了对 safe area 的支持,可以在模板中利用插槽来处理不同的屏幕情况。 ```html <u-popup v-model="showPopup" mode="top"> <!-- 使用safe-area-inset-top确保内容不会被状态栏遮挡 --> <view class="popup-content" :style="{ paddingTop: statusBarHeight + 'px' }"> <!-- 出层的内容 --> </view> </u-popup> ``` 其中 `statusBarHeight` 可以通过调用 uni-app API 获取当前平台的状态栏高度[^1]。 #### 方法二:动态计算样式 另一种方式是在 mounted 生命周期钩子函数里获取视口的高度,并据此设定内边距或外边距。 ```javascript export default { data() { return { showPopup: false, topPadding: 0, // 默认值设为零 }; }, methods: { getSafeAreaInsetTop() { const systemInfo = uni.getSystemInfoSync(); this.topPadding = systemInfo.statusBarHeight; } }, mounted() { this.getSafeAreaInsetTop(); // 页面加载完成后立即执行一次 } }; ``` 之后再将这个变量绑定到 style 上面去控制实际渲染出来的 padding 或 margin 值[^2]。 #### 方法三:全局配置 Page Meta 对于整个应用而言,还可以考虑在页面元数据层面做统一处理,防止因滚动事件引发其他问题的同时也解决了安全区的问题。 ```html <template> <page-meta :page-style="'overflow:hidden;'"></page-meta> <!-- 防止页面滚动 --> ... </template> <script> // 这里的逻辑可以根据实际情况决定是否开启隐藏溢出属性 data(){ return{ iskais:true } } </script> ``` 以上三种办法都可以有效解决 uView 架下 `u-popup` 组件在多端环境下的兼容性难题,开发者可根据项目的具体情况选择最合适的方式实现[^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值