ionic中底部按钮ion-footer-bar切换显示状态会挡住ion-content内容问题?

底部的footer-bar按钮进入页面时没有显示的,“操作”按钮点击后才会显示,这样就会挡住content的内容了
图片描述

图片描述

有没有什么解决办法(如果一进入页面就显示,是没有这个问题,不会挡住content)

html部分

<ion-view view-title="{{i18n.mission_list_label}}" cache-view="isAttConfirm">
  <ion-nav-buttons side="right">
    <button ng-if="canOperate && canSelect" ng-click="showActionSheet()" ng-bind="i18n.operate_label" class="button button-clear button-calm"></button>
  </ion-nav-buttons>
  <ion-content>
    <div ng-if="canOperate && list.length" class="item item-divider ">
      <i ng-show="canSelect" ng-click="toggleSelectAll()" class="w20">
        <input type="checkbox" id="selectAll" ng-checked="selectAll">
        <label for="selectAll"></label>
      </i>
      <span ng-bind="requestTotal"></span>
      <span ng-if="canOperate" class="icon-pos-right">
        <span ng-show="canSelect" ng-click="toggleSelectAll()" ng-bind="i18n.select_all_label" class="touched mr10"></span>
        <span ng-hide="canSelect" ng-click="toggleSelect()" ng-bind="i18n.select_label" class="touched"></span>
        <span ng-show="canSelect" ng-click="toggleSelect()" ng-bind="i18n.cancel_label" class="touched"></span>
      </span>
    </div>
    <ion-list ng-if="!isEmpty && !isAttConfirm && !isPayBillAudit">
      <ion-item collection-repeat="item in list" ng-click="listClick(item)" class="pos-relative">
        <i ng-show="canSelect" ng-click="toggleChecked(item, $event)" class="pos-absolute vertical-middle">
          <input type="checkbox" id="{{item.id}}" ng-checked="item.checked">
          <label for="{{item.id}}"></label>
        </i>
        <div ng-class="{ml2: canSelect}">
          <span ng-bind="item.realname"></span>
          <span ng-bind="item.date | onlyDateFilter" class="pos-absolute rightDate"></span>
        </div>
        <div>
          <img ng-src="{{img}}" ng-class="{ml2: canSelect}" class="icon-img">
          <p ng-bind="item.title"></p>
          <p ng-bind="item.team" ng-if="!isMe && !isComplete"></p>
          <div ng-if="isMe">
            <p ng-bind="item.process_name" class="float-left" style="margin-right: 10px;"></p>
            <p ng-bind="item.status"></p>
          </div>
          <div ng-if="isComplete">
            <p ng-bind="item.process_name" class="float-left"></p>
          </div>
        </div>
      </ion-item>
    </ion-list>
    <ion-list ng-if="!isEmpty && (isAttConfirm || isPayBillAudit)">
      <ion-item collection-repeat="item in list" ng-click="listClick(item.date)" class="pos-relative">
        <img ng-src="{{img}}" class="icon-img">
        <h2 ng-bind="item.date"></h2>
        <p ng-bind="item.total"></p>
      </ion-item>
    </ion-list>
    <ion-infinite-scroll ng-if="haveMore" on-infinite="loadMore()" distance="2%"></ion-infinite-scroll>
    <ion-item ng-if="isEmpty && !haveMore" ng-bind="emptyTip" class="text-center"></ion-item>
  </ion-content>
  <ion-footer-bar ng-if="canOperate && canSelect" align-title="left" class="bar-assertive">
    <div class="buttons">
      <button class="button">左侧按钮</button>
    </div>
    <h1 class="title">Title!</h1>
    <div class="buttons" ng-click="doSomething()">
      <button class="button">右侧按钮</button>
    </div>
  </ion-footer-bar>
</ion-view>
阅读 5.2k
3 个回答

ion-content标签加一个fullscreen属性 但是footer一进入就得显示 不过可以给透明度让后面content的内容显示出来

新手上路,请多包涵

$ionicScrollDelegate.resize();

获得footer的高度,为ion-content设置style:margin-bottom: footerHeight;

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题