动态隐藏显示底部Tab栏

方式1 路由源信息

在这里插入图片描述
在这里插入图片描述

方式2 css样式

css功能:让盒子盖住整个页面
给div.city添加.page-cover的类(让div.city盖住页面的tabbar)

/* 
  让盒子盖住整个页面
*/
.page-cover {
  position: relative;
  z-index: 2;
  height: 100vh;
  background-color: #fff;
  /* 在.city滚动 不是整个页面滚动 */
  overflow-y: auto;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用wx.hideTabBar()来隐藏底部tab,并使用wx.createAnimation()创建动画效果实现弹框的出现和消失。具体代码实现可以参考以下示例: 1. 在wxml文件中定义弹框的布局和动画效果: <view class="popup" animation="{{popupAnimation}}"> ...弹框内容... </view> 2. 在js文件中定义动画效果和弹框的显示隐藏逻辑: // 引入wxsdk const wx = require('weixin-sdk'); Page({ data: { popupAnimation: {}, // 弹框动画对象 isPopupShow: false, // 弹框是否显示 }, // 创建弹框动画对象 createAnimation() { let animation = wx.createAnimation({ duration: 300, // 动画执行时间 timingFunction: 'ease-out', // 缓动效果 delay: 0, // 延迟时间 transformOrigin: 'bottom', // 变换的原点 }); // 从底部向上移动弹框 animation.translateY('-100%').step(); this.setData({ popupAnimation: animation.export(), }); }, // 显示弹框 showPopup() { // 隐藏底部tab wx.hideTabBar(); this.setData({ isPopupShow: true, }); // 从底部向上滑入弹框 let animation = wx.createAnimation({ duration: 300, timingFunction: 'ease-out', }); animation.translateY(0).step(); this.setData({ popupAnimation: animation.export(), }); }, // 隐藏弹框 hidePopup() { // 显示底部tab wx.showTabBar(); // 向下滑出弹框 let animation = wx.createAnimation({ duration: 300, timingFunction: 'ease-out', }); animation.translateY('-100%').step(); this.setData({ popupAnimation: animation.export(), }); // 延迟一段时间后隐藏弹框 setTimeout(() => { this.setData({ isPopupShow: false, }); }, 300); }, }); 注意:本回答仅供参考,具体实现方式可根据自己的需求进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值