Nicht horizontal Blättern mit Ionen-Blättern

Ich ein Projekt erstellt haben, verwenden Sie folgenden Befehl: 

$ ionic start myApp sidemenu

Implementierte ich das horizontale scrollen über Ionen-Liste.

Folgenden ist mein markup 

<ion-scroll direction="x" class="full-width"> 
  <div class="row" >
    <div class="col horizontal-item-margin horizontal-item-padding" ng-repeat="scheduleShowObj in scheduleObjectsList"> 
     <a href="#/app/playlists/{{scheduleShowObj.nid}}">
      <div class="full-width">{{scheduleShowObj.PgmItemDateTime * 1000 | date:'HH:mm a'}}</div>
      <img src={{scheduleShowObj.Thumburl}} class="imgresize"/>
      <div class="full-width">{{scheduleShowObj.PgmTitle}}</div> 
     </a>    
    </div>
  </div> 
</ion-scroll>

Und Folgendes ist mein CSS:

.horizontal-item-margin {
margin-left: 3%;
margin-right: 3%;
}

.horizontal-item-padding {
padding-left: 3%;
padding-right: 3%;
}

.imgresize{
width: 150px; 
height: auto;
}

.full-width{
width: 100%;
padding: 0px;
}

Dem problem bin ich konfrontiert sind :

1.) Ich bin nicht in der Lage, um horizontal zu scrollen.

2.) Weil padding und margin die Zeichen der text in den div oben und unten img-tag erscheint vertikal.

  • Können Sie ein jsfiddle, damit ich sehen kann das es funktioniert (oder nicht funktioniert), so wie Sie es sehen?
  • können Sie mir helfen, mit Geige, als ich bin neu hier und ich habe die controller-Dateien, Fabrik-Dateien und die css-und html-Dateien getrennt in Projekten wie gehen Sie vor, den wir tüfteln, lassen Sie es mich bitte wissen.
  • Hi. Können Sie mir helfen, Blättern verticall. Ich habe die Inhalte innerhalb von <ion-content> - tags. Aber ich kann nicht nach unten scrollen überhaupt. Wie man dieses Problem lösen?
InformationsquelleAutor Niranjan Balkrishna Prajapati | 2014-04-30
  1. 8

    Hier sind zwei Beispiele, die zeigen gerade html/css und dann die Anwendung, die Ionische.

    Erste Nägel mit Köpfen machen HTML/CSS

    Hier ist ein code-Stift der eine sehr einfache horizontale scrollen, nur mit plan, html/css http://codepen.io/jfspencer/pen/ogZeGM

    HTML

    <div id="container">
   <div id="content">
      <div id="1" class="box">stuff</div>
      <div id="2" class="box">more</div>
      <div id="3" class="box">to</div>
      <div id="4" class="box">Find</div>
      <div id="5" class="box">Here</div>
   </div>
</div>

    CSS

    #container{
  overflow-x:scroll;
  height: 80px; 
  width:400px;
}
#content{
   overflow-x:scroll; /* when content is wider than container scrolling will occur on the x axis */
   width:1200px; /* this creates the overflow area in the container */
}
.item{
   /*option a: create block elements and float them left*/
   display:block;  float:left;

   /*option b: use inline elements (or force inline elements)*/
   display: inline;
}

    Die Grundidee ist diese:
    - erstellen Sie ein element, das einige Dimensionen. Die Breite muss kleiner sein als das element platziert es. Dieses innere element, das überlaufen ermöglicht eine scrollbare region zusammen mit der css overflow:scroll und seine Variationen.

    • erstellen Sie ein weiteres element in die erste ein und stellen Sie dessen Breite größer als seine Eltern.

    • gelten overflow:Blättern Sie zu dem äußeren element. Das äußere element ist der Inhalt, der größer ist, es halten zu können. so eine Art und Weise zu handhaben, dass überlauf zu schaffen, ist ein Blättern in die benötigte Richtung, in diesem Fall horizontal.

    Zweite dies für die <ion-scroll>

    Alles das gleiche ist, erwarten, ein paar Sachen sind bereits gepackt : sehen Sie diesen code pen
    http://codepen.io/jfspencer/pen/JoWqmQ

    HTML

    <ion-content id="container">
   <ion-scroll id="ionScrollRegion" direction="x">
      <div id="overflowingContent">
         <div class="item" ng-repeat="item in items">{{item.data}}</div>
      </div>
   </ion-scroll>
</ion-content>

    CSS

    #overflowingContent{
  width: -webkit-max-content;
  width: max-content;
}

.item{
  display:block;
  float:left;
}
    • <ion-scroll> korreliert mit dem container, in dem einfachen Beispiel. Der einzige Unterschied ist die Richtung-Attribut. da wir wissen, dass wir wollen, um zu Blättern, overflow:scroll gegeben ist, müssen wir angeben, sind die Richtungen. x -, y -, oder xy. Siehe die Dokumentation für alle anderen Optionen.
    • Inhalt ist der gleiche wie vorher, wieder mit einem weiteren Optimierung. da das Zeug in den Inhalt div ist wahrscheinlich die variable, die wir anwenden können max-content des Inhalt div ' s width-Eigenschaft, die berechnet die gesamte Breite für uns. Es gibt andere Wege, dies zu tun als gut.
    • Die wiederholten Elemente in der content auf div so gibt es keine Notwendigkeit zu vergeben display:block seit divs Standard dieser. Also alles, was benötigt wird ist die Anwendung float:left um die Elemente nebeneinander.
    • <ion-content> spielt eine Rolle, in, dass Ihre ursprüngliche Breite wird die Größe des jeweiligen Screens. <ion-scroll> erbt, die Breite.
    • Ihre codepen link ist tot.
    InformationsquelleAutor James Spencer
Schreibe einen Kommentar