我正在尝试在离子标签内实施离子滚动 . 想法是离子标签位于屏幕的底部,在一个特定的标签上,我想在顶部有一个可滚动的标签栏,因为我正在使用离子滚动 .

工作的事情:

  • ion-tabs工作正常 .

  • 离子滚动工作正常[仅滚动]

事情是这个问题:

离子滚动内的

  • 元素不可点击 . 我根本没有得到他们的点击事件 .

我的tabs.html有以下代码:

<!-- Add Contact Tab -->
<ion-tab title="Add Contact" badge="requestCount" style="badge-assertive" icon-off="ion-plus" icon-on="ion-plus" href="#/tab/addContacts/forwardOrConnect" class="gtab_label">
  <ion-nav-view name="tab-add_contact"></ion-nav-view>
</ion-tab>

<!-- Profile Tab -->
<ion-tab title="Profile" icon-off="ion-clipboard" icon-on="ion-clipboard" href="#/tab/myProfile/basicDetails">
  <ion-nav-view name="tab-profile"></ion-nav-view>
</ion-tab>

<ion-tab title="New Profile" icon-off="ion-clipboard" icon-on="ion-clipboard" href="#/tab/newProfile">
  <ion-nav-view name="tab-newProfile"></ion-nav-view>
</ion-tab>

现在,对于添加联系人选项卡,离子导航内容如下:

<ion-content>
    <div class="tabslider">
        <ion-scroll direction="x" class="scrollh">
            <button class="button" ng-click="goToSlide($index)" ng-repeat="tab in tabs">{{tab.text}}</button>
        </ion-scroll>
    </div>
    <ion-slide-box style="height: 100%;" show-pager="false" on-slide-changed="slideHasChanged($index)">
        <ion-slide>
            <ion-scroll style="height:100%" delegate-handle="slide1Scroll" >
              <h3>content</h3>
            </ion-scroll>
        </ion-slide>
        <ion-slide>
            <ion-scroll style="height:100%">
              <h3>content</h3>
            </ion-scroll>
        </ion-slide>
    </ion-slide-box>
</ion-content>

有没有人遇到类似问题或任何其他更好的方法来实现这一目标?提前致谢 .