uniapp底部弹窗过渡效果显示与隐藏

最新推荐文章于 2024-06-28 08:44:58 发布

进心进力

最新推荐文章于 2024-06-28 08:44:58 发布

阅读量587

点赞数 8

文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/weixin_42498086/article/details/135826362

版权

在uniapp项目中，经常需要实现底部弹窗的功能，在弹窗的显示与隐藏中增加过渡效果页面功能效果会更好。

以下为是实现代码

为了代码复用，在components目录中创建popup组件

<template>
	<view>
		<view class="sheet-popup" :class="[show ? 'sheet-popup-show' : '']" :style="{'border-radius': `${borderRadius}rpx ${borderRadius}rpx 0rpx 0rpx`}">
			<slot></slot>
		</view>
		<view class="popup-mask" :class="[show ? 'popup-mask-show' : '']" @click="closePopup"></view>
	</view>
</template>

<script>
	export default {
		name:"popup",
		props:{
			// 显示状态
			show: {
				type: Boolean,
				default: false
			},
			// 显示弹窗的圆角
			borderRadius: {
				type: [Number, String],
				default: 0
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			closePopup() {
				this.$emit('close')
			}
		}
	}
</script>

<style>
	.sheet-popup{
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9998;
		visibility: hidden;
		transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.2s ease-in-out;
		overflow: hidden;
		max-width: 500px;
		margin: 0 auto;
	}
	.sheet-popup-show {
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}
	.popup-mask{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9996;
		background: rgba(0,0,0,0.5);
		max-width: 500px;
		margin: 0 auto;
		transition: all 0.2s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}
	.popup-mask-show {
		opacity: 1;
		visibility: visible;
	}
</style>

在需要弹窗的界面中引用

<template>
    <view>
        <view @tap="showPopu = true">弹窗</view>
		<popup :show="showPopu" @close="showPopu=false" borderRadius='20'>
			<!-- 弹窗的内容样式 -->
			<view class="content">
				<view>1</view>
				<view>1</view>
				<view>1</view>
				<view>1</view>
			</view>
		</popup>
    </view>
</template>
 
<script>
    import popup from '@/components/popup/popup.vue'
    export default {
		components: {
			popup
		},
        data() {
			return {
				showPopu: false
			}
		},
        methods: {
			
		}
    }
</script>
<style>
	
</style>