Pop up window at the bottom of uniapp applet

Realization effect ：

Parent component ：

<Screen :show='showS' :list="serviceList" @close="close"></Screen>
import Screen from '@/components/service'

data(){
    
return {
    
showS:false,
list:[]
 }
}
methods:{
    
	getShow(){
    
		this.showS=true
	},
	close(e) {
    
		this.showS = e
	},
}

Child components ：

<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 class="dec" @click="close()">
				<text> Service description </text>
				<u-icon name="close" size="30"></u-icon>
			</view>
			<view class="" v-for="item in list">
				<view class="title"><uni-icons type="checkbox" color="#FFA220"/> <text style="padding-left: 5px;">{
    {
    item.serviceTitle}}</text> </view>
				<text class="textDec">{
    {
    item.serviceDesc}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
    
		name:'writeOff',
		props:{
    
			show:{
    
				type: Boolean,
				required: true
			},
			list:{
    
				type:Array,
				required:true
			}
		},
		data() {
    
			return {
    
				hideModal: false, // The state of the modal box  true- hide  false- Show 
				animationData: {
    }, //
				val: 0,
			}
		},
		watch:{
    
			show(val) {
    
				if(val){
    
					this.showModal()
				}
			}
		},
		methods:{
    
			
			//  Show mask layers 
			showModal: function() {
    
				var that = this;
				that.hideModal = true
				var animation = uni.createAnimation({
    
					duration: 600, // The duration of the animation   Default 400ms  The greater the numerical , The slower the animation   The smaller the numerical , The faster the animation 
					timingFunction: 'ease', // The effect of animation   The default value is linear
				})
				this.animation = animation
				setTimeout(function() {
    
					that.fadeIn(); // Call show animation 
				}, 200)
			},
			//  Hide the mask layer 
			close: function() {
    
				var that = this;
				var animation = wx.createAnimation({
    
					duration: 400, // The duration of the animation   Default 400ms  The greater the numerical , The slower the animation   The smaller the numerical , The faster the animation 
					timingFunction: 'ease', // The effect of animation   The default value is linear
				})
				this.animation = animation
				that.fadeDown(); // Call hide animation  
				setTimeout(function() {
    
					that.hideModal = false
					that.$emit('close',!that.show)
				}, 720) // Start with the slide animation , Then hide the module 
			
			},
			// Animation set 
			fadeIn: function() {
    
				this.animation.translateY(0).step()
				this.animationData = this.animation.export() // Animation examples of export Method to export animation data to components animation attribute 
			},
			fadeDown: function() {
    
				this.animation.translateY(335).step() // Distance traveled 
				this.animationData = this.animation.export()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title{
    
		font-size: 14px;
		// color: #FFA220;
		height: 24px;
		line-height: 24px;
		padding-left: 8px;
	}
	.textDec{
    
		padding-left: 24px;
		color: #C8C9CC;
	}
	.dec{
    
		display: flex;
		justify-content: space-between;
		background-color: #E5E5E5;
		color: black;
		padding: 0 15px;
		line-height: 30px;
		height: 30px;
		text{
    
			display: inline-block;
		}
	}
	.container{
    
		.mask{
    
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0);
			z-index: 20;
			position: fixed;
			top: 0;
			left: 0;
		}
		.content{
    
			width: 100%;
			min-height: 420rpx;
			position: fixed;
			bottom: 85rpx;
			left: 0;
			background-color: #FFFFFF;
			z-index: 21;
			border-radius: 20rpx 20rpx 0 0;
			overflow: hidden;
		}
		/* Initial position before animation */
		.bottom-pos {
    
			-webkit-transform: translateY(100%);
			transform: translateY(100%);
		}
	}
</style>