uni-app app底部弹出窗

淩亂°似流年 2022-12-23 00:51 419阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYSF9jc2Ru_size_16_color_FFFFFF_t_70_pic_center]  
vue页面代码

<Screen :show='show' @close="close"></Screen>
    //还有一个点击事件,将show=true
    close(e) {
    	this.show = e
    },

子组件代码

<template>
    	<view class="container" v-show="hideModal">
    		<view class="mask" @touchmove.stop.prevent @click="close()"></view>
    		<view class="content bottom-pos" :animation="animationData" @touchmove.stop.prevent>
    			
    		</view>
    	</view>
    </template>
    
    <script>
    	import StoreMix from "@/plugins/mixin/store";
    	export default{
    		name:'writeOff',
    		mixins: [StoreMix],
    		props:{
    			show:{
    				type: Boolean,
    				required: true
    			},
    		},
    		data() {
    			return {
    				hideModal: false, //模态框的状态  true-隐藏  false-显示
    				animationData: {}, //
    				val: 0,
    			}
    		},
    		watch:{
    			show(val) {
    				if(val){
    					this.showModal()
    				}
    			}
    		},
    		methods:{
    			
    			// 显示遮罩层
    			showModal: function() {
    				var that = this;
    				that.hideModal = true
    				var animation = uni.createAnimation({
    					duration: 600, //动画的持续时间 默认400ms   数值越大，动画越慢   数值越小，动画越快
    					timingFunction: 'ease', //动画的效果 默认值是linear
    				})
    				this.animation = animation
    				setTimeout(function() {
    					that.fadeIn(); //调用显示动画
    				}, 200)
    			},
    			// 隐藏遮罩层
    			close: function() {
    				var that = this;
    				var animation = wx.createAnimation({
    					duration: 800, //动画的持续时间 默认400ms   数值越大，动画越慢   数值越小，动画越快
    					timingFunction: 'ease', //动画的效果 默认值是linear
    				})
    				this.animation = animation
    				that.fadeDown(); //调用隐藏动画   
    				setTimeout(function() {
    					that.hideModal = false
    					that.$emit('close',!that.show)
    				}, 720) //先执行下滑动画，再隐藏模块
    			
    			},
    			//动画集
    			fadeIn: function() {
    				this.animation.translateY(0).step()
    				this.animationData = this.animation.export() //动画实例的export方法导出动画数据传递给组件的animation属性
    			},
    			fadeDown: function() {
    				this.animation.translateY(335).step() //移动的距离
    				this.animationData = this.animation.export()
    			},
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    	.container{
    		.mask{
    			width: 100%;
    			height: 100%;
    			background: rgba(0, 0, 0, 0.7);
    			z-index: 20;
    			position: fixed;
    			top: 0;
    			left: 0;
    		}
    		.content{
    			width: 100%;
    			height: 670rpx;
    			position: fixed;
    			bottom: 0;
    			left: 0;
    			background-color: #F8F8F8;
    			z-index: 21;
    			border-radius: 20rpx 20rpx 0 0;
    			overflow: hidden;
    		}
    		/*动画前初始位置*/
    		.bottom-pos {
    			-webkit-transform: translateY(100%);
    			transform: translateY(100%);
    		}
    	}
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYSF9jc2Ru_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/6c8f9e87c6854f23a2fbad6115354152.png