【uniapp】实现小程序底部弹框带动画以及隐藏底部栏tab

代码如下：【暂且还没优化，点击后会有点闪烁的bug，有点影响效果】

<template>
	<view>
		<view @tap="clickme">点击显示底部弹框</view>
		<!-- 变暗的背景 -->
		<view class="mask" @tap="hideModal" v-if="showModalStatus"></view>
		<!-- 底部弹出框 -->
		<view  :animation="animationData" class="bottom_box" v-if="showModalStatus">底部弹框布局自拟</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				animationData: {},
				showModalStatus: false
			}
		},
		onLoad: function(options) {},
		methods: {
			//点击显示底部弹出框
			clickme: function() {
				this.showModal();
			},

			//显示对话框
			showModal: function() {
				// 显示遮罩层
				
				var animation = uni.createAnimation({
				  transformOrigin: "50% 50%",
				  duration: 1000,
				  timingFunction: "ease",
				  delay: 0
				})
				
				var animation = uni.createAnimation({
					//duration	Integer 动画持续时间，单位ms
					duration: 200,
					//timingFunction	String  默认"linear"（动画从头到尾的速度是相同的）	定义动画的效果
					timingFunction: 'linear',
					//delay	Integer		默认 0	动画延迟时间，单位 ms
					delay: 0
				})
					animation.translateY('400rpx').step()
					this.animationData = animation.export(),
					setTimeout(() => {

	                    //隐藏底部栏
						uni.hideTabBar();	

							animation.translateY(0).step(),
							this.animationData = animation.export(),
						this.showModalStatus = true
					}, 100)
			},

			//隐藏对话框
			hideModal: function() {
				// 隐藏遮罩层
				var animation = uni.createAnimation({
					//duration	Integer 动画持续时间，单位ms
					duration: 200,
					//timingFunction	String  默认"linear"（动画从头到尾的速度是相同的）	定义动画的效果
					timingFunction: 'linear',
					//delay	Integer		默认 0	动画延迟时间，单位 ms
					delay: 0
				});
				animation.translateY('400rpx').step(),
					this.animationData = animation.export(),
					setTimeout(() => {

                        // 显示底部栏
						uni.showTabBar();

						animation.translateY(0).step(),
						this.showModalStatus = false
					}, 100)
			},

		}
	}
</script>
<style>
	/*遮罩层  */
	.mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.2;
		overflow: hidden;
		z-index: 1000;
		color: #fff;
	}

	/*底部框 */
	.bottom_box {
		height: 400rpx;
		width: 100%;
		overflow: hidden;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 2000;
		background: #fff;
		padding-top: 20rpx;
		background-color: aqua;
	}
</style>

如果需要隐藏底部栏tab可以：【效果不是太好，但是勉强能用】

	//隐藏底部栏
	uni.hideTabBar();	


    // 显示底部栏
    uni.showTabBar();

凑合着用，直接粘贴run一下即可。