uniapp手写自定义弹窗

弹窗这种东西真的是太常见了常见到烂大街 但是每个平台的弹窗都不太一样 样式不统一就不怎么好看 像把代码编译到安卓端 然后就… 哎不说了 安卓离苹果的距离还是很远的 这里只限于自己想设计统一样式 当然用官网的插件也是可以的嘛

---

首先我们要做点什么呢

首先就是看这个弹窗它的结构和弹窗动作逻辑 em… 其实也就是弹出来 然后能隐藏 后面有一个遮罩层 然后弹出窗居中

先做一个遮罩

这一步也不是太复杂 直接就是一段CSS 代码就实现了 上代码

<view class="popup">

</view>

.popup {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	height: 100vh;
	background-color: rgba(0,0,0,0.6);
	z-index: 9998;
}

这样我们就定义了一个当前页面的蒙层 这里要要注意设置 z-index 层级高点 rgba后面的小数就是蒙层具体透明度了 可自行调整 接下来就是弹窗具体内容部分了

<view class="popup-info">

</view>

这里我们让 弹窗居中屏幕正中 层级要比蒙层高 这些也是用CSS 就实现了 这里具体样式可以自己修改

.popup-info{
	position: fixed;
	width: 550upx;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-size: 30upx;
	padding: 40upx;
	border-radius: 20upx;
	background-color: #fff;
	z-index: 9999;
}

这样 完整的弹窗就出来了 我们只要让他隐藏显示就可以了 具体什么内容都可以写到弹窗里 图片 对话框 文本提示什么的

接下来就是实现显示和隐藏的切换 我们定义两个button按钮 其实样式要好看的话最好不要用按钮 用图片代替按钮样式是比较好的选择

<button type="default" @tap="tapPopup">我是弹窗</button>
<view class="popup" v-show="show">
			<view class="popup-info">
			<view>----我是内容----</view>
				<view class="popup-btn">
					<view><button type="default" @tap="cancel">取消</button></view>
					<view><button type="default" class="affirm" @tap="affirm">确认</button></view>
			</view>
		</view>
</view>

export default {
	data() {
		return {
			show:false,
	},
	methods:{
		// 弹窗
		tapPopup() {
			this.show = true;
		},
		// 点击弹窗取消
		cancel() {
			this.show = false;
		},
		// 点击弹窗确认
		affirm() { 
			this.show = false;
		}
	}
},

然后我们在其他需要弹窗的地方将这个show 设置为 true 就可以了 是不是很简单 代码只是伪代码 不要直接这样写哦 要结合自己的代码应用