m0_60928092 2022-06-28 00:51 采纳率: 62.5%
浏览 133
已结题

vant小程序,自定义tabbar如何让日历弹窗覆盖tabbar

想要的效果

img

而我总是在底部有导航栏

img


谢谢
我使用了原生合vant的自定义都没能实现,打开遮住导航栏

  • 写回答

3条回答 默认 最新

  • 林一怂儿 前端领域新星创作者 2022-06-28 08:30
    关注

    可以通过调用wx.hideTabBar和wx.showTabBar隐藏或展示底部的tabbar。

    img

    index.js

    Page({
      data: {
        show: false
      },
      showPopup() {
        wx.hideTabBar({ animation: true })
        setTimeout(() => { this.setData({ show: true }); }, 200);
      },
      onClose() {
        this.setData({ show: false });
        setTimeout(() => { wx.showTabBar({ animation: true }) }, 300);
      },
    })
    

    index.wxml

    <van-cell title="展示弹出层" is-link bind:click="showPopup" />
    <van-popup show="{{ show }}" bind:close="onClose" position="bottom" custom-style="height: 20%;" closeable close-icon-position="top-right">
    </van-popup>
    

    index.json

    {
      "usingComponents": {
        "van-popup": "/miniprogram_npm/@vant/weapp/popup/index",
        "van-cell": "/miniprogram_npm/@vant/weapp/cell/index"
      }
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 7月6日
  • 已采纳回答 6月28日
  • 创建了问题 6月28日