我希望有7个页面的幻灯片标签，但它从第1页到第5页正常工作，但第6页和第7页将重复第1页和第2页。
我不确定哪个部分不正确。取出这两个页面中的任何一个都可以正常工作。
模板
<ion-content id="screenerContent" scroll="false">
<div class="row slideTabWrapper">
<div class="col col-30 one" ng-class="{selected: currentSlide==0}" ng-click="currentSlide = 0">Top Technical</div>
<div class="col col-30 two" ng-class="{selected: currentSlide==1}" ng-click="currentSlide = 1">Bottom Technical</div>
<div class="col col-30 three" ng-class="{selected: currentSlide==2}" ng-click="currentSlide = 2">Top Fundamental</div>
<div class="col col-30 four" ng-class="{selected: currentSlide==3}" ng-click="currentSlide = 3">Bottom Fundamental</div>
<div class="col col-30 five" ng-class="{selected: currentSlide==4}" ng-click="currentSlide = 4">Top Overall</div>
<div class="col col-30 six" ng-class="{selected: currentSlide==5}" ng-click="currentSlide = 5">Bottom Overall</div>
<div class="col col-30 seven" ng-class="{selected: currentSlide==6}" ng-click="currentSlide = 6">Market Stats</div>
</div>
<ion-slide-box class="slider" show-pager="false" active-slide="currentSlide">
<ion-slide>
<div class="list">
<div class="item row" ng-repeat="bStock in topBuy" ng-click="openDetail(bStock)">
<div class="col col-30 stockCol">
<p>{{bStock.Stock}}</p>
<p>{{bStock.Name}}</p>
</div>
<div class="col boldText vindexCol" ng-class="colorCoding[bStock.Trade]"><span>T: {{bStock.Tindex | number:2}}</span></div>
<div class="col previousCol"><span>{{bStock.Previous_close}}</span></div>
<div class="col changeCol" ng-class="{red: bStock.Change<0, green: bStock.Change>0,orange: bStock.Change==0}">
<p>{{bStock.Change}}</p>
<p>({{(bStock.Change_pc>=0)?"+":""}}{{bStock.Change_pc}}%)</p>
</div>
</div>
</div>
</ion-slide>
<ion-slide>
<div class="list">
<div class="item row" ng-repeat="sStock in topSell" ng-click="openDetail(sStock)" >
<div class="col col-30 stockCol">
<p>{{sStock.Stock}}</p>
<p>{{sStock.Name}}</p>
</div>
<div class="col boldText vindexCol" ng-class="colorCoding[sStock.Trade]"><span>T: {{sStock.Tindex | number:2}}</span></div>
<div class="col previousCol"><span>{{sStock.Previous_close}}</span></div>
<div class="col changeCol" ng-class="{red: sStock.Change<0, green: sStock.Change>0,orange: sStock.Change==0}">
<p>{{sStock.Change}}</p>
<p>({{(sStock.Change_pc>=0)?"+":""}}{{sStock.Change_pc}}%)</p>
</div>
</div>
</div>
</ion-slide>
<ion-slide>
<div class="list">
<div class="item row" ng-repeat="aStock in topFin" ng-click="openDetail(aStock)">
<div class="col col-30 stockCol">
<p>{{aStock.Stock}}</p>
<p>{{aStock.Name}}</p>
</div>
<div class="col boldText vindexCol" ng-class="colorCoding[aStock.Trade]"><span>F: {{aStock.Findex | number:2}}</span></div>
<div class="col previousCol"><span>{{aStock.Previous_close}}</span></div>
<div class="col changeCol" ng-class="{red: aStock.Change<0, green: aStock.Change>0,orange: aStock.Change==0}">
<p>{{aStock.Change}}</p>
<p>({{(aStock.Change_pc>=0)?"+":""}}{{aStock.Change_pc}}%)</p>
</div>
</div>
</div>
</ion-slide>
<ion-slide>
<div class="list">
<div class="item row" ng-repeat="cStock in bottomFin" ng-click="openDetail(cStock)" >
<div class="col col-30 stockCol">
<p>{{cStock.Stock}}</p>
<p>{{cStock.Name}}</p>
</div>
<div class="col boldText vindexCol" ng-class="colorCoding[cStock.Trade]"><span>F: {{cStock.Findex | number:2}}</span></div>
<div class="col previousCol"><span>{{cStock.Previous_close}}</span></div>
<div class="col changeCol" ng-class="{red: cStock.Change<0, green: cStock.Change>0,orange: cStock.Change==0}">
<p>{{cStock.Change}}</p>
<p>({{(cStock.Change_pc>=0)?"+":""}}{{cStock.Change_pc}}%)</p>
</div>
</div>
</div>
</ion-slide>
<ion-slide>
<ion-slide>
<div class="list">
<div class="item row" ng-repeat="dStock in topVin" ng-click="openDetail(dStock)">
<div class="col col-30 stockCol">
<p>{{dStock.Stock}}</p>
<p>{{dStock.Name}}</p>
</div>
<div class="col boldText vindexCol" ng-class="colorCoding[dStock.Trade]"><span>V: {{dStock.Vindex | number:2}}</span></div>
<div class="col previousCol"><span>{{dStock.Previous_close}}</span></div>
<div class="col changeCol" ng-class="{red: dStock.Change<0, green: dStock.Change>0,orange: dStock.Change==0}">
<p>{{dStock.Change}}</p>
<p>({{(dStock.Change_pc>=0)?"+":""}}{{dStock.Change_pc}}%)</p>
</div>
</div>
</div>
</ion-slide>
<ion-slide>
<div class="list">
<div class="item row" ng-repeat="eStock in bottomVin" ng-click="openDetail(eStock)" >
<div class="col col-30 stockCol">
<p>{{eStock.Stock}}</p>
<p>{{eStock.Name}}</p>
</div>
<div class="col boldText vindexCol" ng-class="colorCoding[eStock.Trade]"><span>V: {{eStock.Vindex | number:2}}</span></div>
<div class="col previousCol"><span>{{eStock.Previous_close}}</span></div>
<div class="col changeCol" ng-class="{red: eStock.Change<0, green: eStock.Change>0,orange: eStock.Change==0}">
<p>{{eStock.Change}}</p>
<p>({{(eStock.Change_pc>=0)?"+":""}}{{eStock.Change_pc}}%)</p>
</div>
</div>
</div>
</ion-slide>
<ion-slide>
<div class="row">
<div class="col boldText" ng-class="colorCoding[marketSentiment]">
Market Sentiment: {{marketSentiment}}
</div>
</div>
<div class="row">
<div class="col boldText">
<div class="barChart">
<div class="green" style="width: {{bar.green/bar.total *100}}%;"></div><div class="orange" style="width: {{bar.orange/bar.total *100}}%;"></div><div class="red" style="width: {{bar.red/bar.total *100}}%;"></div>
</div>
<span class="greenText">Bull: {{bar.green}}</span><br>
<span class="orangeText">Neutral: {{bar.orange}}</span><br>
<span class="redText">Bear: {{bar.red}}</span><br>
</div>
</div>
</ion-slide>
</ion-slide-box>
</ion-content>
angular.js
angular.module('myproject.controllers').controller('stockScreenerCtrl',
['$scope', '$rootScope', '$cashDataFactory', '$webServicesFactory', '$marketProvider', '$colorCodeProvider', '$state', '$globalFactory', '$ionicLoading',
function($scope, $rootScope, $cashDataFactory, $webServicesFactory, $marketProvider, $colorCodeProvider, $state, $globalFactory, $ionicLoading) {
$ionicLoading.show();
$scope.bar = {green: 0, orange: 0, red: 0, total: 1};
$scope.currentSlide = 0;
$scope.currentMarket = $cashDataFactory.getItem("currentMarket");
$scope.colorCoding = $colorCodeProvider;
function loadTop() {
$webServicesFactory.get($marketProvider[$scope.currentMarket].topGetURL, {AnonymousToken: $marketProvider[$scope.currentMarket].token}).then(
function success(response) {
$scope.topBuy = response.Stock.slice(0, 10);
$scope.topSell = response.Stock.slice(10, 20);
loadStockCount();
loadTopF();
loadTopV();
$ionicLoading.hide();
},
function error(error) {
$ionicLoading.hide();
}
);
}
function loadTopF() {
$webServicesFactory.get($marketProvider[$scope.currentMarket].topFinURL, {AnonymousToken: $marketProvider[$scope.currentMarket].token}).then(
function success(response) {
$scope.topFin = response.Stock.slice(0, 10);
$scope.bottomFin = response.Stock.slice(10, 20);
loadStockCount();
loadTop();
loadTopV();
$ionicLoading.hide();
},
function error(error) {
$ionicLoading.hide();
}
);
}
function loadTopV() {
$webServicesFactory.get($marketProvider[$scope.currentMarket].topVinURL, {AnonymousToken: $marketProvider[$scope.currentMarket].token}).then(
function success(response) {
$scope.topVin = response.Stock.slice(0, 10);
$scope.bottomVin = response.Stock.slice(10, 20);
loadStockCount();
loadTop();
loadTopF();
$ionicLoading.hide();
},
function error(error) {
$ionicLoading.hide();
}
);
}
function loadStockCount() {
$webServicesFactory.get(
$marketProvider[$scope.selectedMarket].queryURL+"/count",
{AnonymousToken: $marketProvider[$scope.selectedMarket].token}
).then(
function success(data) {
data = data.Trade;
console.info(data);
$scope.bar.total = (data[0].BUY_total||0) + (data[0].HOLD_total||0) + (data[0].SELL_total||0);
console.info($scope.bar.total);
$scope.bar.green = 0;
$scope.bar.orange = 0;
$scope.bar.red = 0;
$scope.bar.green = data[0].BUY_total;
$scope.bar.orange = data[0].HOLD_total;
$scope.bar.red = data[0].SELL_total;
$scope.marketSentiment = data[0].Market_sentiment;
$ionicLoading.hide();
},
function error(error) {
$ionicLoading.hide();
}
);
}
loadTop();
loadTopF();
loadTopV();
$scope.openDetail = function (stock) {
console.log(stock + " /hello");
$globalFactory.stockDetail = {};
console.info(stock);
//if($scope.currentMarket == "kls")
$globalFactory.stockDetail.stock = stock.Stock;
$globalFactory.stockDetail.market = $scope.currentMarket;
$state.go("app.screenerDetail");
};
$rootScope.$on("currentMarketChanged", function (e, market) {
$scope.currentMarket = market;
$ionicLoading.show();
loadTop();
loadTopV();
loadTopF();
});
}
]
);
CSS
#screenerContent .slideTabWrapper{
height: 50px;
color: #ffffff;
padding: 0;
overflow-x: scroll;
overflow-y: hidden;
}
#screenerContent .slideTabWrapper .col{
height: 100%;
width: 33%;
text-align: center;
padding-top: 0px;
background-color: #16324f;
}
.slideTabWrapper .col.one{
border-bottom: solid #33cd5f 3px;
}
.slideTabWrapper .col.two{
border-bottom: solid #ef473a 3px;
}
.slideTabWrapper .col.three{
border-bottom: solid #33cd5f 3px;
}
.slideTabWrapper .col.four{
border-bottom: solid #ffffff 3px;
}
.slideTabWrapper .col.five{
border-bottom: solid #33cd5f 3px;
}
.slideTabWrapper .col.six{
border-bottom: solid #ffffff 3px;
}
.slideTabWrapper .col.seven{
border-bottom: solid #ffffff 3px;
}
.slideTabWrapper .col.selected{
background-color: #102439;
}
我需要什么。
答案 0 :(得分：0)
这是一个简单的离子选项卡滑块
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;
console.log("slide Change");
if ($scope.slideIndex == 0){
console.log("slide 1");
}
else if ($scope.slideIndex == 1){
console.log("slide 2");
}
else if ($scope.slideIndex == 2){
console.log("slide 3");
}
};
$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> <!-- / tabs -->
</div>
<ion-slide-box on-slide-changed="slideChanged(index)" active-slide="slideIndex" class="padding">
<ion-slide>
<h3>Tab 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus pretium leo et dignissim. Nam aliquet sagittis turpis, eu dapibus ante suscipit nec. Cras vel dignissim nibh. Duis consectetur condimentum consequat. Nam ullamcorper congue nisi vel euismod. Nunc a tempus felis. Fusce lobortis scelerisque faucibus. Aliquam id scelerisque felis. Integer posuere magna in porta finibus. Maecenas sit amet quam neque.
Duis gravida volutpat elit, in elementum neque cursus sit amet. Nullam euismod lectus dui, bibendum molestie sapien semper a. Ut sit amet nisi erat. Morbi et odio id est scelerisque porta. Curabitur ut gravida neque. Sed a fermentum ante, eget bibendum tellus. Mauris euismod mauris porttitor euismod cursus. In orci orci, condimentum sed mauris vitae, egestas iaculis erat. Phasellus eget suscipit nisl. Vivamus pulvinar, nibh vel hendrerit molestie, nunc dui sagittis justo, ac maximus turpis nunc eget ex. Vestibulum a risus mi. Proin elementum sem eget hendrerit lobortis. Etiam egestas aliquet nulla a hendrerit. Fusce convallis consequat consequat. Quisque id pellentesque nibh. Sed tempus neque ligula.</p>
</ion-slide>
<ion-slide>
<h3>Tab 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus pretium leo et dignissim. Nam aliquet sagittis turpis, eu dapibus ante suscipit nec. Cras vel dignissim nibh. Duis consectetur condimentum consequat. Nam ullamcorper congue nisi vel euismod. Nunc a tempus felis. Fusce lobortis scelerisque faucibus. Aliquam id scelerisque felis. Integer posuere magna in porta finibus. Maecenas sit amet quam neque.
Duis gravida volutpat elit, in elementum neque cursus sit amet. Nullam euismod lectus dui, bibendum molestie sapien semper a. Ut sit amet nisi erat. Morbi et odio id est scelerisque porta. Curabitur ut gravida neque. Sed a fermentum ante, eget bibendum tellus. Mauris euismod mauris porttitor euismod cursus. In orci orci, condimentum sed mauris vitae, egestas iaculis erat. Phasellus eget suscipit nisl. Vivamus pulvinar, nibh vel hendrerit molestie, nunc dui sagittis justo, ac maximus turpis nunc eget ex. Vestibulum a risus mi. Proin elementum sem eget hendrerit lobortis. Etiam egestas aliquet nulla a hendrerit. Fusce convallis consequat consequat. Quisque id pellentesque nibh. Sed tempus neque ligula.</p>
</ion-slide>
<ion-slide>
<h3>Tab 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus pretium leo et dignissim. Nam aliquet sagittis turpis, eu dapibus ante suscipit nec. Cras vel dignissim nibh. Duis consectetur condimentum consequat. Nam ullamcorper congue nisi vel euismod. Nunc a tempus felis. Fusce lobortis scelerisque faucibus. Aliquam id scelerisque felis. Integer posuere magna in porta finibus. Maecenas sit amet quam neque.
Duis gravida volutpat elit, in elementum neque cursus sit amet. Nullam euismod lectus dui, bibendum molestie sapien semper a. Ut sit amet nisi erat. Morbi et odio id est scelerisque porta. Curabitur ut gravida neque. Sed a fermentum ante, eget bibendum tellus. Mauris euismod mauris porttitor euismod cursus. In orci orci, condimentum sed mauris vitae, egestas iaculis erat. Phasellus eget suscipit nisl. Vivamus pulvinar, nibh vel hendrerit molestie, nunc dui sagittis justo, ac maximus turpis nunc eget ex. Vestibulum a risus mi. Proin elementum sem eget hendrerit lobortis. Etiam egestas aliquet nulla a hendrerit. Fusce convallis consequat consequat. Quisque id pellentesque nibh. Sed tempus neque ligula.</p>
</ion-slide>
<ion-slide>
<h3>Tab 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus pretium leo et dignissim. Nam aliquet sagittis turpis, eu dapibus ante suscipit nec. Cras vel dignissim nibh. Duis consectetur condimentum consequat. Nam ullamcorper congue nisi vel euismod. Nunc a tempus felis. Fusce lobortis scelerisque faucibus. Aliquam id scelerisque felis. Integer posuere magna in porta finibus. Maecenas sit amet quam neque.
Duis gravida volutpat elit, in elementum neque cursus sit amet. Nullam euismod lectus dui, bibendum molestie sapien semper a. Ut sit amet nisi erat. Morbi et odio id est scelerisque porta. Curabitur ut gravida neque. Sed a fermentum ante, eget bibendum tellus. Mauris euismod mauris porttitor euismod cursus. In orci orci, condimentum sed mauris vitae, egestas iaculis erat. Phasellus eget suscipit nisl. Vivamus pulvinar, nibh vel hendrerit molestie, nunc dui sagittis justo, ac maximus turpis nunc eget ex. Vestibulum a risus mi. Proin elementum sem eget hendrerit lobortis. Etiam egestas aliquet nulla a hendrerit. Fusce convallis consequat consequat. Quisque id pellentesque nibh. Sed tempus neque ligula.</p>
</ion-slide>
<ion-slide>
<h3>Tab 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus pretium leo et dignissim. Nam aliquet sagittis turpis, eu dapibus ante suscipit nec. Cras vel dignissim nibh. Duis consectetur condimentum consequat. Nam ullamcorper congue nisi vel euismod. Nunc a tempus felis. Fusce lobortis scelerisque faucibus. Aliquam id scelerisque felis. Integer posuere magna in porta finibus. Maecenas sit amet quam neque.
Duis gravida volutpat elit, in elementum neque cursus sit amet. Nullam euismod lectus dui, bibendum molestie sapien semper a. Ut sit amet nisi erat. Morbi et odio id est scelerisque porta. Curabitur ut gravida neque. Sed a fermentum ante, eget bibendum tellus. Mauris euismod mauris porttitor euismod cursus. In orci orci, condimentum sed mauris vitae, egestas iaculis erat. Phasellus eget suscipit nisl. Vivamus pulvinar, nibh vel hendrerit molestie, nunc dui sagittis justo, ac maximus turpis nunc eget ex. Vestibulum a risus mi. Proin elementum sem eget hendrerit lobortis. Etiam egestas aliquet nulla a hendrerit. Fusce convallis consequat consequat. Quisque id pellentesque nibh. Sed tempus neque ligula.</p>
</ion-slide>
<ion-slide>
<h3>Tab 6</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus pretium leo et dignissim. Nam aliquet sagittis turpis, eu dapibus ante suscipit nec. Cras vel dignissim nibh. Duis consectetur condimentum consequat. Nam ullamcorper congue nisi vel euismod. Nunc a tempus felis. Fusce lobortis scelerisque faucibus. Aliquam id scelerisque felis. Integer posuere magna in porta finibus. Maecenas sit amet quam neque.
Duis gravida volutpat elit, in elementum neque cursus sit amet. Nullam euismod lectus dui, bibendum molestie sapien semper a. Ut sit amet nisi erat. Morbi et odio id est scelerisque porta. Curabitur ut gravida neque. Sed a fermentum ante, eget bibendum tellus. Mauris euismod mauris porttitor euismod cursus. In orci orci, condimentum sed mauris vitae, egestas iaculis erat. Phasellus eget suscipit nisl. Vivamus pulvinar, nibh vel hendrerit molestie, nunc dui sagittis justo, ac maximus turpis nunc eget ex. Vestibulum a risus mi. Proin elementum sem eget hendrerit lobortis. Etiam egestas aliquet nulla a hendrerit. Fusce convallis consequat consequat. Quisque id pellentesque nibh. Sed tempus neque ligula.</p>
</ion-slide>
<ion-slide>
<h3>Tab 7</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus pretium leo et dignissim. Nam aliquet sagittis turpis, eu dapibus ante suscipit nec. Cras vel dignissim nibh. Duis consectetur condimentum consequat. Nam ullamcorper congue nisi vel euismod. Nunc a tempus felis. Fusce lobortis scelerisque faucibus. Aliquam id scelerisque felis. Integer posuere magna in porta finibus. Maecenas sit amet quam neque.
Duis gravida volutpat elit, in elementum neque cursus sit amet. Nullam euismod lectus dui, bibendum molestie sapien semper a. Ut sit amet nisi erat. Morbi et odio id est scelerisque porta. Curabitur ut gravida neque. Sed a fermentum ante, eget bibendum tellus. Mauris euismod mauris porttitor euismod cursus. In orci orci, condimentum sed mauris vitae, egestas iaculis erat. Phasellus eget suscipit nisl. Vivamus pulvinar, nibh vel hendrerit molestie, nunc dui sagittis justo, ac maximus turpis nunc eget ex. Vestibulum a risus mi. Proin elementum sem eget hendrerit lobortis. Etiam egestas aliquet nulla a hendrerit. Fusce convallis consequat consequat. Quisque id pellentesque nibh. Sed tempus neque ligula.</p>
</ion-slide>
</ion-slide-box>
</ion-content>
</body>
</html>
吨