Question

我需要一个带有ion-slides指令的可滚动页面。如果我在离子内容中设置了scroll = true，则页面上不会显示滑块。我正在运行离子1.3.1并使用新的离子滑动指令。这是我的代码，

<ion-content class="padding" scroll="false">

    <div class="list card">
      <div class="item no-padding">
        <img class="full-image" src="http://12.jpg">
      </div>


      <div class="item ">
         <button  class="button  icon-left ion-android-navigate  button-stable">Directions </button>
         <button  class="button  icon-left ion-ios-telephone  button-stable">Call </button>
         <button  class="button  icon-left ion-android-share-alt  button-stable">Share</button>
      </div>
    </div>


     <div class="slide-wrapper1">
        <ion-slides  options="options" slider="data.slider">
          <ion-slide-page>
            <img src="http://placehold.it/375x468/">
          </ion-slide-page>
          <ion-slide-page>
            <img src="http://placehold.it/375x468/0000">
          </ion-slide-page>
          <ion-slide-page>
            <img src="http://placehold.it/375x468/">
          </ion-slide-page>
        </ion-slides>
      </div>


    <h4>About </h4>
    <div class="card">
      <div class="item item-text-wrap">
        This is a basic Card which contains an item that has wrapping text.
      </div>
    </div>
</ion-content>

我做错了什么，如何让离子幻灯片在可滚动的页面中工作？

感谢您的帮助

Answer 1

如何用离子内容包裹离子幻灯片页面的内容，如：

   <div class="slide-wrapper1">
    <ion-slides  options="options" slider="data.slider">
      <ion-slide-page>
       <ion-content has-header="true" padding="true">
        <img src="http://placehold.it/375x468/">
       </ion-content>
      </ion-slide-page>
    </ion-slides>
  </div>

我想请注意，这应该适用于Android。我想我必须删除iOS的离子内容才能在设备上运行。

*编辑 - 此外，我的外部离子含量设置为真

仅当ion-content scroll = false时，才会在视图中显示离子幻灯片

1 个答案: