【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 动画持续时间，单位msduration: 200,//timingFunction    String  默认"linear"（动画从头到尾的速度是相同的）   定义动画的效果timingFunction: 'linear',//delay   Integer     默认 0    动画延迟时间，单位 msdelay: 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 动画持续时间，单位msduration: 200,//timingFunction    String  默认"linear"（动画从头到尾的速度是相同的）   定义动画的效果timingFunction: 'linear',//delay   Integer     默认 0    动画延迟时间，单位 msdelay: 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一下即可。

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

微信小程序禁止弹框下面的内容滑动弹窗禁止底部内容滚动
我们需要解决的问题:当弹框显示的时候,弹框下面的内容不能滚动小程序的弹框特别多,像下面这样,弹框的底部是一个可以下拉的页面,但是当弹框出现的时候,需要禁止底部的滚动,那么怎么做呢? 解决方案: 给v ...
微信小程序 - 解决弹框遮罩层的滚动穿透问题
在小程序页面里有自定义弹窗时候,发现弹窗外滚动的时候,底部背景页面也会跟随滚动.面对这个bug,我们可以用下面几种方法实现: 方法1:catchtouchmove="true" 可 ...
微信小程序自定义弹框+生成二维码功能
最近在做小程序的功能,需求是弹框生成二维码功能,所以根据需求自定义了一个弹框组件,后续其他地方也可以用到. 最后效果图如下 dialog部分 <!--components/dialog/dial ...
uniapp微信小程序仿聊天输入框在软键盘隐藏显示时与底部距离，以及保证聊天消息滚动到底部的问题以及解决办法
(本文最后边有完整代码,想先看效果的,可以直接粘贴不会报错) 一.先说输入框 1.输入框和键盘紧贴着,也就是计算输入框在键盘隐藏显示时距离底部的距离,我让输入框外边的盒子固定定位,给bottom一 ...
微信小程序自定义弹框组件
话不多说直接上代码目录 1.wxml 2.js 3.wxss 4.json 5.效果展示(具体内容可以自定义) 1.wxml <!--pages/components/confirmBox/c ...
小程序canvas 圆角框带填充颜色
// ctx: 获取canvas的id --- const ctx = wx.createCanvasContext('canvasId') // x 横坐标 y 纵左边 w 框的宽度 h 框的高度 ...
微信小程序之弹框modal
官方文档 <modal hidden="{{hidden}}" title="这里是title" confirm-text="自定义确定按钮&q ...
微信小程序日历弹框组件
参考文章:https://blogai.cn/posts/46 calendar.json {"usingComponents": {},"disableScroll&q ...
Axure如何制作app底部弹框，固定在底部
相信大家在日常的app原型绘制中,经常会遇到做底部弹框的功能,如果底部弹框会弹出不同的操作的话,这个时候大家就会使用动态面板进行原型制作,但是此时会存在一个问题,如果动态面板在不同的状态下高度不一样的 ...

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

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

最新文章

热门文章