Ionic Not Displaying Header или Scroll

Я пытаюсь создать похожее на то, что мы видим в Apple App Store. Он работает ... однако, по какой-то причине мой слайдер не отображается в верхней части представления, когда я просматриваю его на своем мобильном устройстве, но отлично работает, когда показываю в Google Chrome с помощью мобильного представления в инструментах разработчика. Кто-нибудь есть идеи? Мой взгляд по вертикали не прокручивается ни по какой-либо причине, я думаю, что это может быть конфликт с горизонтальным прокруткой ... это или я где-то неправильно синтаксис?Ionic Not Displaying Header или Scroll

Я угадываю его HTML, где проблема?

Мой HTML:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <title>App</title> 

    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/drewrygh-misc/hscrollcards.css" /> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 
    <script src='https://s3-us-west-2.amazonaws.com/drewrygh-misc/ionic.hscrollcards.js'></script> 



    <link href="css/style.css" rel="stylesheet"> 

    <script src="js/app.js"></script> 
    <script src="cordova.js"></script> 
    </head> 

    <body ng-app="starter" class="slide-left-right-ios7"> 

     <ion-header-bar class="bar-positive"> 
     <h1 class="title">App</h1> 
     </ion-header-bar> 
<ion-pane overflow-scroll="true"> 
     <div class="home-wrapper"> 
    <!--start featured banner--> 

    <div ng-controller="testCtrl"> 
     <ion-slide-box delegate-handle="theSlider" show-pager="true" does-continue="true" auto-play="true"> 
      <ion-slide ng-repeat="feat in featured"> 
      <h2>{{feat.name}}</h2> 
      <img ng-src="{{feat.heder_img}}" style="width:100%" /> 
      </ion-slide> 
    </ion-slide-box> 
    </div> 

     <!--end featured banner--> 
    <div ng-controller="barsCtrl"> 
     <h4>Top Rated Bars</h4> 
     <hscroller> 
     <hcard ng-repeat="bar in bars" index="{{$index}}" desc="{{bar.name}}" image="{{bar.profile_pic}}"></hcard> 
     </hscroller> 
     </div> 

    <div ng-controller="restCtrl"> 
     <h4>Top Rated Restaurants</h4> 
     <hscroller>  
     <hcard ng-repeat="restaurant in restaurants" index="{{$index}}" desc="{{restaurant.name}}" image="{{restaurant.profile_pic}}"></hcard> 
     </hscroller> 
    </div> 


</ion-pane> 
     <nav class="tabs tabs-icon-bottom tabs-positive"> 
     <a class="tab-item" ng-click="#"> 
      Home<i class="icon ion-android-home"></i> 
     </a> 

     <a class="tab-item" ng-click="#"> 
      Categories<i class="icon ion-ios-list"></i> 
     </a> 

     <a class="tab-item" href="#"> 
      Events<i class="icon ion-calendar"></i> 
     </a> 
    </nav> 

    </div> 
    </body> 
</html>

JS:

angular.module('starter', ['ionic', 'ionic.contrib.ui.hscrollcards']) 

.controller('barsCtrl', function($scope, $http) 
{ 
    $http.get('http://liverpool.li/api/feat/type/1'). 
    success(function(data, status, headers, config) 
    { 
     $scope.bars = data.Featured; 
     console.log($scope.bars); 
    }). 
    error(function(data, status, headers, config) 
    {});  
}) 

.controller('testCtrl', function($scope, $http) 
{ 
    $http.get('http://liverpool.li/api/feat/home'). 
    success(function(data, status, headers, config) 
    { 
     $scope.featured = data.Featured; 
    }). 
    error(function(data, status, headers, config) 
    {});  
}) 

.controller('restCtrl', function($scope, $http) 
{ 
    $http.get('http://liverpool.li/api/feat/type/2'). 
    success(function(data, status, headers, config) 
    { 
     $scope.restaurants = data.Featured; 
    }). 
    error(function(data, status, headers, config) 
    {});  
})

источник

2015-06-08 BCLtd

Что ваш телефон: iPhone или Android?

Если iPhone, проверьте на рабочем столе Safari, чтобы убедиться, что он работает. Если этого не произойдет, у вас будет доступ к инструментам Safari Dev, чтобы найти причину проблемы.

источник

2015-06-08 22:59:49 ThiagoPXP

Спасибо за советы, он делает это как на Android, так и на iPhone – BCLtd

Ionic Not Displaying Header или Scroll

ответ

Смежные вопросы