Question

我正在尝试创建一个类似于我们在Apple App Store上看到的视图。它有效...但是，出于某种原因，当我在移动设备中查看时，我的滑块不会显示在视图的顶部，但是当我在开发者工具中使用移动视图在Google Chrome中显示时，它可以正常工作。有谁有想法吗？由于某种原因，我的观点不会垂直滚动，我认为这可能与水平滚动有冲突...或者我在某处有某种语法错误？

我猜猜问题出在哪里？

我的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)
    {});      
})

Answer 1

你的手机是什么：iPhone或Android？

如果是iPhone，请在Safari桌面上进行测试以确保其正常运行。如果没有，您将可以访问Safari Dev工具来查找问题的原因。

离子不显示标题或滚动

1 个答案: