Framework7跳转页面如何自动隐藏工具栏(no-tabbar)

首先在Framework7文档(http://docs.framework7.cn/Index/tabbar.html)中我们知道:

Framework7 允许你在ajax加载的页面自动隐藏工具栏/导航栏。只有在穿透布局的时候才可以使用。
你唯一需要做的就是在需要加载的页面上加一个类 “no-tabbar”(<div class="page no-tabbar">):

<!-- Page has additional "no-tabbar" class -->
<div data-page="about" class="page no-tabbar">
  <div class="page-content">
    <div class="content-block">
      <p><a href="#" class="back button">Go Back</a></p>
      ...
    </div>
  </div>
</div>

从文档可以知道隐藏工具栏相当容易,但有几个需要注意的地方。
首先自动隐藏工具栏只有在穿透布局的时候才可以使用,对于这一点相信很多人容易忽略掉,当时我就遇到过这样的问题。所以你必须使用穿透布局,给pages标签添加toolbar-throughclass即可(<div class="pages navbar-through toolbar-through">
还有一个要注意的地方是你的toolbarhtml代码必须要放在穿透布局内(将toolbarhtml代码放在pagehtml代码内),否则在你跳转页面时是会自动隐藏工具栏,但你用力上拉时,工具栏又会跑出来。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值