欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

uni-app app底部弹出窗

程序员文章站 2024-03-21 12:04:58
...

uni-app app底部弹出窗
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>


相关标签: web app

上一篇: extJs弹出动态表格和列表

下一篇: