Vertically scroll-able lists/contents in ion-slidebox

ionic-v1
1

Hello People,

I am running into a bit of an issue trying to have a vertically scroll-able list (ion-list) inside of horizontal sliders (ion-slidebox). I was able to achieve my desired layout but my lists won’t scroll. Please what I’m I missing?

I have something close to the following:

<ion-content has-header="true">

  <ion-slide-box show-pager="false" on-slide-changed="slideChanged()">

    <ion-slide>
      <ion-scroll>
        
        <ion-list>
          <ion-item type="item-text-wrap" href="">
            <h3>Adam Smith</h3>
            <p>CEO</p>
          </ion-item>
          <ion-item type="item-text-wrap" href="">
            <h3>Julie Taylor</h3>
            <p>VP of Marketing</p>
          </ion-item>
          <ion-item type="item-text-wrap" href="">
            <h3>Eugene Lee</h3>
            <p>CFO</p>
          </ion-item>
          <ion-item type="item-text-wrap" href="">
            <h3>John Williams</h3>
            <p>VP of Engineering</p>
          </ion-item>
          <ion-item type="item-text-wrap" href="">
            <h3>Ray Moore</h3>
            <p>VP of Sales</p>
          </ion-item>
          <ion-item type="item-text-wrap" href="">
            <h3>Paul Jones</h3>
            <p>Chief Hacker</p>
          </ion-item>
          <ion-item type="item-text-wrap" href="">
            <h3>Paula Gates</h3>
            <p>Software Engineer</p>
          </ion-item>
          <ion-item type="item-text-wrap" href="">
            <h3>John Doe</h3>
            <p>Growth Hacker</p>
          </ion-item>
          <ion-item type="item-text-wrap" href="">
            <h3>John Doe</h3>
            <p>Growth Hacker</p>
          </ion-item>
          <ion-item type="item-text-wrap" href="">
            <h3>John Doe</h3>
            <p>Growth Hacker</p>
          </ion-item>
          <ion-item type="item-text-wrap" href="">
            <h3>John Doe</h3>
            <p>Growth Hacker</p>
          </ion-item>
          <ion-item type="item-text-wrap" href="">
            <h3>John Doe</h3>
            <p>Growth Hacker</p>
          </ion-item>
        </ion-list>
      
      </ion-scroll>
    </ion-slide>
  
   ...
2

Place the ion-content inside the slide, add some css and your golden.

3 Likes
3

Thank you @mhartington for your demo, a quick one - is it possible to have the slides remember their individual scroll positions and all with this layout?

4

When changing your views or going between sides? When changing slides, it should remember each individual scroll position

5

Hi @mhartington, you are right - it does remember scroll positions between slides, yet to test across views which would be what I’m really trying to achieve, say coming from other parts/views of my app that are not slides - can it remember my slide and scroll position as well?

6

you can always test it out.

If it doesn’t right away, you can alwasy use $ionicScrollDelegate.rememberScrollPosition()

1 Like
7

Thank you for the hint, however, have got one more issue to tackle - when changing views, I’d like to come back to the slide I was on before navigating away. Is there any api function I can hook into to remember my previous slide when coming from a different view?

8

Not really, or not right now. Slide box is getting a big over haul at the moment so this kind of feature and many more can be added in.

9

Alright then, thanks for all your help. Would have to rework my app layout while I wait for the changes to come through, except I can find a work around tentatively.

10

Hmm, maybe look into tabs for this kind of layout

11

Funnily enough I started off with tabs and most likely would ship the first version of the app with tabs layout - looking into using slidebox owing to client’s pressure to have this ‘usually’ native feature they’ve seen and continue to use in so many mobile apps. I must say I got very close to pulling it off, if not for the missing slide history!

As an aside, I don’t have any transition animation moving from one tab to the other, what do you reckon I may be doing wrong? Thanks.

12

By default, tabs wont transition. Not really a common pattern you see, but you can add it if you want

1 Like
13

That was easy, thank you - didn’t think of adding the class to my ion-tabs directive. I’m opting for using swipe events (e.g. on-swipe-left=“expression”) to simulate the sliding behavior for this initial release.

14

Hmm, could be interesting. Something similar to twitter on ios?

15

Yeah, something similar to that. I noticed the tabs on your codepen sample above only slide to the left, no matter the direction one is coming from, that’s not quite right. Any ideas?

16

I am also dealing with the issue of losing the slidebox position after navigating away, and I can tell you how I solved it… essentially before I navigate away from the slidebox, I send the current state (slide position and any other data) to a service. The controller looks for this state information on startup and repopulates the slide position, data, etc. That way, when you navigate back to the tab, the slidebox is in the right position, etc.

Marc

17

i need to add the arrow left and right how can i
???

18

Where would you like to add arrow? Could you explain a bit more?

19

within a slidebox to indicate arrow left and right that must be next and previous arrow

20

i will send you ma code see once …if i change the location it must be add new slides everytime but here slide pager not shown as of slides length it will add plus two for lenght evry time