Mix ion slides with ion list


#1

Hi, I am trying to create a page that contains 10 slides and each one has a list of 10 or more items (text), the problem is that when creating the first list in the first slides, the others are left with the scrol of the first list . Do you get me?


#2

I get the basic idea, but not entirely sure. Ion slide is a component made to use the full screen, not to make a C++ style menu left and page loading async on the right. If this is your intent, it’s not the right component in Ionic framework. Check this component:

SplitPane --> http://blog.ionic.io/ionic-2-2-0-is-out/


#3

Ok thanks a lot for answering, I’m going to study the component that you shared with me.


#4

You’re welcome, SplitPane is quite new, but very promising, as it allows a left menu / right pages and lists, and is hidden with low width screens, like a smartphone in portrait mode.


#5

You’re providing an interface to a book. Look at the UI of a typical e-book reader. It doesn’t look anything like what you have. Your text is unreadable. The tabs at the top are weird. I would have a searchbox at the top, a side menu for navigating amongst books and chapters, and the content be a single card with a (swipe) listener that scrolls the text in the card.


#6

@rapropos Actually my sheet this way, I like to try many options, apologize for trying to try different ways of doing things.


#7

I’m not a UI expert. You probably aren’t either. When you’re presenting something like a book, I think you are best off emulating the experience that everybody who has ever read a book on a touchscreen device is accustomed to for your core functionality. You can add other aspects (such as search and menu navigation) that make more sense for a book that is generally intended to be read or searched for specific language than would be the case for a novel that is generally just going to be read serially, but the core UI of the post that started this thread looks to me like something best given up on.


#8

Everything you mentioned is something I plan to put forward, but when I have more knowledge of the subject, for now I work with what I can.


#9

You need to start with the core display concept, because you can’t meaningfully do any navigation stuff without it. What I am suggesting is something like this:

<ion-content>
  <ion-card (swipeLeft)="onSwipeLeft()" (swipeRight)="onSwipeRight()">
    <div>
      {{texts[activeix]}}
    </div>
  </ion-card>
</ion-content>

texts = [
  "the quick brown fox",
  "jumped over",
  "the lazy dog",
];
activeix = 0;

onSwipeLeft(): void {
  if (this.activeix < this.texts.length-1) {
    this.activeix++;
  }
}

onSwipeRight(): void {
  if (this.activeix > 0) {
    this.activeix--;
  }
}