离子面板进行滚动 [英] Ionic Pane Not Scrolling

查看：95 发布时间：2016/5/10 20:25:18 angularjs ionic

本文介绍了离子面板进行滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我很新的离子型，但我一直各种问题来了，时间越长我与它的工作。通常很小的问题（幸运的），但他们不足以阻止我在我的轨道。

不管怎样，我有了一些图像和水平滚动内容的看法。但是，如果我想在这个应用程序垂直滚动，它只是将无法工作。我曾尝试添加

 ＆LT;离子面板溢出滚动=真正的＆GT;

但无济于事我的问题仍然存在。没有任何人有任何进一步的反馈意见是我应该寻找到？

 ＆LT;离子视图标题=家捉迷藏后退按钮=真正的＆GT;
  ＆LT;离子面板溢出滚动=真正的＆GT;
  ＆LT; DIV CLASS =家庭包装＆GT;     ＆LT;！ - 功能开始大旗 - ＆GT;
     ＆LT; DIV NG控制器=testCtrl＆GT;
        ＆LT;离子滑动盒代表手柄=theSlider显示寻呼机=真不-继续=真正的自动播放=真正的＆GT;
          ＆LT;离子滑NG重复=＆GT参与的壮举;
            ＆LT; H2＆GT; {{feat.name}}＆LT; / H＆GT;
            ＆LT; IMG NG-SRC ={{feat.heder_img}}的风格=宽度：100％/＆GT;
          ＆LT; /离子幻灯片＆GT;
        ＆LT; /离子滑动盒＆GT;
      ＆LT; / DIV＆GT;
        ＆LT;！ - 结束特色的旗帜 - ＆GT;      ＆LT; DIV NG控制器=barsCtrl＆GT;
        ＆LT; H4＆GT;评分最高的酒吧和LT; / H4＆GT;
        ＆LT; hscroller＆GT;
        ＆LT;一个NG重复=在酒吧酒吧的href =＃/场地/ {{bar.id}}＆GT;＆LT;的hCard指数={{$指数}}DESC ={{bar.name }}形象={{bar.profile_pic}}＆GT;＆LT; /＆hCard的GT;＆LT; / A＆GT;
      ＆LT; / hscroller＆GT;
      ＆LT; / DIV＆GT;      ＆LT; DIV NG控制器=restCtrl＆GT;
        ＆LT; H4＆GT;顶级餐厅与LT; / H4＆GT;
        ＆LT; hscroller＆GT;
        ＆LT;一个NG重复=在饭店餐厅的href =＃/场地/ {{restaurant.id}}＆GT;＆LT;的hCard指数={{$指数}}DESC ={{restaurant.name }}形象={{restaurant.profile_pic}}＆GT;＆LT; /＆hCard的GT;＆LT; / A＆GT;
      ＆LT; / hscroller＆GT;
      ＆LT; / DIV＆GT;      ＆LT;！ - 即将到来的3个活动 - ＆GT;
      ＆LT; DIV NG控制器=测试＆GT;
        ＆LT; H4＆GT;近期活动＆LT; / H4＆GT;
        ＆LT; DIV CLASS =清单＆GT;
          ＆LT; DIV CLASS =项项除法＆GT;今天＆LT; / DIV＆GT;
          ＆LT;一类=项项具象的href =＃＆GT;
            ＆所述; IMG SRC =http://ionicframework.com/img/docs/slimer.jpg＆GT;
            ＆LT; H2＆GT;非洲奥耶＆LT; / H＆GT;
            ＆LT; P＆GT;快来参加我们的节日＆LT; / P＆GT;
          ＆所述; / A＆GT;
          ＆LT;一类=项项具象的href =＃＆GT;
            ＆所述; IMG SRC =http://ionicframework.com/img/docs/slimer.jpg＆GT;
            ＆LT; H2＆GT;＆奶油地LT; / H＆GT;
            ＆LT; P＆GT;快来参加我们的节日＆LT; / P＆GT;
          ＆所述; / A＆GT;
        ＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;
      ＆LT;！ - 即将到来的3个活动 - ＆GT;  ＆LT; / DIV＆GT;＆LT; /离子面板＆GT;
      ＆LT;导航类=标签标签图标底部的标签阳性＆GT;
              ＆LT;一类=标签项NG点击=＃＆GT;
                  家庭及LT; I类=图标离子Android的家＆GT;＆LT; / I＆GT;
              ＆所述; / A＆GT;
              ＆LT;！ -  incluir链接达categoria褐，第一个红外venue.html  - ＆GT;
              ＆LT;一类=标签项NG点击=＃HREF =＃/家＆GT;
                  分类＆LT; I类=图标离子IOS列表＆GT;＆LT; I＆GT /;
              ＆所述; / A＆GT;              ＆LT;一类=标签项的href =＃＆GT;
                  活动＆LT; I类=图标离子日历＆GT;＆LT; I＆GT /;
              ＆所述; / A＆GT;
        ＆LT; / NAV＆GT;
＆LT; /离子视图＆gt;

解决方案

只需更换离子面板用离子含量。离子面板默认不会因为滚动

  .pane {
  位置：绝对的;
  顶部：0;
  右：0;
  底部：0;
  左：0;
  宽度：100％;
  高度：100％;
  溢出：隐藏;
}

这肯定会prevent您的div被滚动。

I am very new to ionic but I keep coming across issues, the longer I am working with it. Usually very small issues (luckily), but they are enough to halt me in my tracks.

Anyhow, I have a view that has some images and horizontal scroll content. But if I want to scroll vertically on this app, it just won't work. I have tried adding

<ion-pane overflow-scroll="true">

But to no avail my issue still persist. Does anyone else have any further feedback what I should be looking in to?

<ion-view  title="Home" hide-back-button="true">
  <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>
        <a ng-repeat="bar in bars" href="#/venue/{{bar.id}}"><hcard index="{{$index}}" desc="{{bar.name}}" image="{{bar.profile_pic}}"></hcard></a>
      </hscroller>
      </div>

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

      <!-- upcoming 3 events -->
      <div ng-controller="test">
        <h4>Upcoming Events</h4>
        <div class="list">
          <div class="item item-divider">Today</div>
          <a class="item item-avatar" href="#">
            <img src="http://ionicframework.com/img/docs/slimer.jpg">
            <h2>Africa Oye</h2>
            <p>Come and join our festival</p>
          </a>
          <a class="item item-avatar" href="#">
            <img src="http://ionicframework.com/img/docs/slimer.jpg">
            <h2>Creamfields</h2>
            <p>Come and join our festival</p>
          </a>
        </div>
      </div>
      <!-- upcoming 3 events -->

  </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>
              <!-- incluir link da categoria aqui, para ir a venue.html-->
              <a class="tab-item" ng-click="#" href="#/home">
                  Categories<i class="icon ion-ios-list"></i>
              </a>

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

解决方案

Simply replace ion-pane with ion-content. ion-pane won't scroll by default because

.pane{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

This will definitely prevent your divs from being scrolled.

这篇关于离子面板进行滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

离子面板进行滚动 [英] Ionic Pane Not Scrolling

问题描述

相关文章

JavaScript最新文章

热门教程

热门工具

登录关闭

离子面板进行滚动 [英] Ionic Pane Not Scrolling

问题描述

相关文章

JavaScript最新文章

热门教程

热门工具

登录 关闭

登录关闭