个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我有如下片段。在手机屏幕较小的情况下，将无法一次显示所有 7 个标签。因此，它会显示为两行不整齐的选项卡。
我希望它一次显示 3 个选项卡并且可以滚动。例如，在幻灯片 2 中，它将在左侧显示幻灯片 1 的选项卡，在中间显示幻灯片 2，在右侧显示幻灯片 3。当我滑动到第 3 页时，向左滑动标签 2，向中间滑动标签 3，向右滑动标签 4。这意味着，幻灯片选项卡正在移动。
我当前的代码如下
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope,$ionicSlideBoxDelegate) {
$scope.slideIndex = 0;
// Called each time the slide changes
$scope.slideChanged = function(index) {
$scope.slideIndex = index;
};
$scope.activeSlide = function (index) {
$ionicSlideBoxDelegate.slide(index);
};
});body {
cursor: url('https://ionicframework.com/img/finger.png'), auto;
}
.slide-tab{
display: table;
overflow: hidden;
margin: 0;
width: 100%;
background-color: #eff0f2;
border-bottom: 2px solid #00897B;
}
.slide-tab li{
float: left;
line-height: 38px;
overflow: hidden;
padding: 0;
}
.slide-tab a{
background-color: #eff0f2;
border-bottom: 1px solid #fff;
color: #888;
font-weight: 500;
display: block;
letter-spacing: 0;
outline: none;
padding: 0 20px;
text-decoration: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
border-bottom: 2px solid #00897B;
}
.current a{
color: #fff;
background: #00897B;
}<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Slide Tab</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Ionic Slide Tab</h1>
</ion-header-bar>
<ion-content>
<div class="row">
<ul class="slide-tab">
<li ng-class="slideIndex == 0 ? 'current':''"><a href="#" ng-click="activeSlide(0)">Tab01</a></li>
<li ng-class="slideIndex == 1 ? 'current':''"><a href="#" ng-click="activeSlide(1)">Tab02</a></li>
<li ng-class="slideIndex == 2 ? 'current':''"><a href="#" ng-click="activeSlide(2)">Tab03</a></li>
<li ng-class="slideIndex == 3 ? 'current':''"><a href="#" ng-click="activeSlide(3)">Tab04</a>
</li>
<li ng-class="slideIndex == 4 ? 'current':''"><a href="#" ng-click="activeSlide(4)">Tab05</a></li>
<li ng-class="slideIndex == 5 ? 'current':''"><a href="#" ng-click="activeSlide(5)">Tab06</a></li>
<li ng-class="slideIndex == 6 ? 'current':''"><a href="#" ng-click="activeSlide(6)">Tab07</a></li>
</ul>
</div>
<ion-slide-box on-slide-changed="slideChanged(index)" active-slide="slideIndex" class="padding">
<ion-slide>
<h3>Tab 1</h3>
<p>Page 1</p>
</ion-slide>
<ion-slide>
<h3>Tab 2</h3>
<p>Page 2</p>
</ion-slide>
<ion-slide>
<h3>Tab 3</h3>
<p>Page 3</p>
</ion-slide>
<ion-slide>
<h3>Tab 4</h3>
<p>page 4</p>
</ion-slide>
<ion-slide>
<h3>Tab 5</h3>
<p>page 5</p>
</ion-slide>
<ion-slide>
<h3>Tab 6</h3>
<p>page 6</p>
</ion-slide>
<ion-slide>
<h3>Tab 7</h3>
<p>page 7</p>
</ion-slide>
</ion-slide-box>
</ion-content>
</body>
</html>我想知道如何通过最少的代码更改使其同时在屏幕上滚动 3 个选项卡。
最佳答案
你可以这样试试..
https://codepen.io/mastersmind/pen/QNqzbL
<ion-scroll class='myScroll' dir='ltr' zooming='true' direction='x' style='width: 100%; height: 50px'></ion-scroll>
这可以帮助您使用标签向 x 方向滚动..
关于javascript - ionic 1 : scrollable tabs (multiple tabs) and handle overflow，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44601385/
24
4
0
当我尝试使用可滚动时，出现错误:$(".scrollable").scrollable 不是一个函数 $(function() { // initialize scrollable w
我发现所有关于滚动对话框的内容都是关于覆盖层的，但它是为了描述对话框的行为，但我需要滚动其中不在 mat-content 中的内容，因为它是一个完整的组件。 打开我正在使用的对话框: const di
我正在使用以下插件: http://flowplayer.org/tools/scrollable.html 在“Scripting API”的子标题下 - 有一个方法如下: getItems() j
有没有办法检测是否滚动 PageView(PageController)或 可滚动 小部件(ScrollController) 由用户手动完成，或在 Controller 对象上使用 jumpTo()
请查看视频/gif: 我的网页浏览量将使当前选项卡处于事件状态。我需要确保事件选项卡始终可见，即使用户多次滑动屏幕也是如此。它是从左到右工作的。但是当我们尝试从右向左返回时，它的行为并不像预期的那样。
我有一个 UITextView，我希望它可以滚动。现在的问题是，键盘出现后，用户只能在屏幕的前半部分输入评论。我想要的是 TextView 可滚动，以便用户可以输入新信息。 这是我正在使用的代码: [
希望这是一个简单的过程! 我从 UserControl 派生，我正在覆盖 OnPaint。我希望此控件可滚动，但我想要的只是能够获取滚动条的值并自行处理在何处绘制所有内容。我已经设置了以下内容: //
我有一个程序可以输出 300-1000 行数据。我希望它有一个类似联机帮助页的界面，而不是一次全部输出，它会显示前 50 行左右的输入，然后用户可以按“f”或“b”来浏览页。有没有办法在 Python
我正在使用 Android 设计支持库中的 TabLayout。我正在使用 Material 设计主题。下面是代码 activity_scrollable_Tab.xml 可
ScrollableControl 类有 2 个 protected bool 属性:HScroll 和 VScroll。 作为document说: Gets or sets a value indi
我们有一个具有 CSS hieght:40px; 的可滚动 div。里面是多个LI height:20px item1 item2 item3 item4 item5 item6 item7
npm react-scrollable-anchor 由于某种原因无法正常工作。我只能在中跳转到id属性标签，不知道为什么。 我尝试过库，包括 react-scrollable-anchor、rea
我正在使用可滚动插件，非常棒的东西，并且按照我想要的方式工作。 我唯一想改变的是: 我有一个滚动的链接图像列表。当我单击图像时，滚动条仍然滚动并且看起来有点奇怪。当用户点击链接时如何停止它？ $("#
有没有办法让我检查控件的滚动条当前是否显示？我想使用它，以便确定如何调整 Scrollable 控件子级的大小，这在某种程度上取决于是否显示 ScrollBar(Scrollable 控件可以动态调整
我的表格布局: 这是手机上的结果: 在平板电脑上: 你可以看到我有 3 个选项卡:at、after 和 recurrence。在手机上，标签宽度不一样，因此它们非常适合 DialogFragment
我在这里展示了我的应用程序的 xml 布局。我想使用 Scrollview 滚动整个页面。但我无法使用。ScrollView 只支持一个直接子级。但我想滚动整个内容。请帮助我解决这个问题？
我有一个可滚动的 JPanel，其中在框布局(垂直轴)中添加了许多编辑器 Pane (具有各自的滚动 Pane )。我的问题是，在单击特定按钮时，我希望特定的编辑器 Pane 获得焦点并在屏幕上可见。
我正在尝试在我的表结构中创建一个 tfoot 元素，我希望它固定在底部，而 tbody 保持可滚动。我已经阅读了各种相关的问题和答案，而且大多数似乎都使用了嵌套表。 虽然有人可能会争辩说“什么都行是你
我正在基于此 tutorial 制作工具提示它使用 jquery .offset() 作为位置。 page with tooltip 当我将工具提示放在可滚动项中时，由于溢出(我认为)，除了第一个可滚
嗨，我对此很陌生，发生了一件奇怪的事情:我已经通过 在我的 magento 页面中实现了 instafeed {{block type="core/template" template="page/i
我是一名优秀的程序员,十分优秀！