尝试使用离子标签时遇到问题。
我需要它们始终显示在屏幕底部(类似position: fixed; bottom: 0; left: 0;
)。
他们遇到的问题是,在我目前的设置中,表现得并不像。
这是我正在使用的模板:
<h2>This is subview</h2>
<div class="list">
<div class="item " ng-repeat="el in elements">
{{el.name}}
</div>
</div>
<div class="tabs tabs-icon-only tabs-dark">
<a class="tab-item">test</a>
<a class="tab-item">test 1</a>
<a class="tab-item">test 2</a>
</div>
但是标签链接到屏幕的底部,因此,如果我必须滚动页面,则位于底部而不是始终可见,内容在不同的z-index上滚动。
我可能已经解释得很糟糕了,所以这里有一个更好地解释这个问题的例子: http://codepen.io/NickHG/pen/NNZYwK?editors=1010
总结一下:即使页面较长,我还需要做什么才能将标签固定在底部?
PS:所有这些都是指子视图,如果它以某种方式重要的话。
感谢您的任何建议和帮助
答案 0 :(得分:1)
你的整个应用程序结构有点搞砸了。您可以在此处查看一个有效的示例:https://codepen.io/anon/pen/XdLEye
您应该考虑将<ion-tabs>
指令与<ion-tab>
一起使用来构建选项卡。此外,您的标签必须是<ion-nav-view>
之后的下一个脚本,并且您的列表位于<ion-content>
内。
根据评论编辑:
你可以制定一个隐藏标签的指令,如下所示:
.directive('hideTabs', function($rootScope) {
return {
restrict: 'A',
link: function($scope, $el) {
$rootScope.hideTabs = 'tabs-item-hide';
$scope.$on('$destroy', function() {
$rootScope.hideTabs = '';
});
}
};
})
然后在你的模板中使用它:
<ion-view hide-tabs></ion-view>
并在选项卡中包含此内容:
<ion-tabs class="tabs-icon-top {{$root.hideTabs}}">
然后将在此特定视图中隐藏选项卡。如果只有几页要显示它并将其隐藏在其他地方,您也可以将其还原为show-tabs
指令。
答案 1 :(得分:1)
最后,我解决了将标签向上移动一级以使它们不再位于子视图中,并将一些范围事件复制到主控制器而不是子视图控制器中。
以下是我更改的代码:http://codepen.io/NickHG/pen/NNZYwK?editors=1010
<ion-view>
<ion-content>
<h1>Details for id</h1>
Below the line, subview content:
<hr>
<div ui-view="myDetailsSubview"></div>
</ion-content>
<ion-tabs class="tabs-positive tabs-icon-top">
<ion-tab>test 1</ion-tab>
<ion-tab>test 2</ion-tab>
<ion-tab>test 3</ion-tab>
</ion-tabs>
</ion-view>
答案 2 :(得分:0)
添加到您的<ion-content>
<ion-content scroll="false">
我不太确定,但您可能必须将其添加到离子内容之外,但我祝您好运!