uniapp小程序底部弹出窗口

本文介绍了一个Vue.js应用中父子组件的交互方式,通过一个具体的例子展示了如何使用props和自定义事件来传递数据和控制状态。同时,详细阐述了模态框的显示和隐藏动画实现,包括遮罩层的显示隐藏、内容的平滑过渡等效果,利用uni-app的动画库创建并应用动画。
摘要由CSDN通过智能技术生成

实现效果:
在这里插入图片描述
在这里插入图片描述

父组件:

<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
	},
}

子组件:

<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>服务说明</text>
				<u-icon name="close" size="30"></u-icon>
			</view>
			<vi
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值