How to create a horizontal scrolling list in OnsenUI-Reactjs?



  • Does someone know how to do this?



  • @beebase You “might” be able to do this with this plugin: https://github.com/Morhaus/react-list-view

    You would be able to place the Onsen components in the renderItem portion.

    Otherwise an option would be to just do it with a standard unordered list and CSS.

    <ul class="images">
      <li>...</li>
      <li>...</li>
      <li>...</li>
    </ul>
    
    ul.images {
      margin: 0;
      padding: 0;
      white-space: nowrap;
      width: 900px;
      overflow-x: auto;
      background-color: #ddd;
    }
    ul.images li {
      display: inline;
      width: 150px;
      height: 150px;
    }
    


  • Thanks, unordered list works well except not with the Splitter (sidebar navigation) as the outer component of the app.
    Is there a way to disable the Splitter on certain pages?
    Or should I set the Navigator (stacked navigation) as outer component and then add the splitter on pages where I need them?

    (index.html)

     <Splitter>
            <SplitterSide
              side='left'
              collapse={true}
              isOpen={this.state.isOpen}
              onClose={this.hide.bind(this)}
              isSwipeable={true}>
              <Page>
                Menu content
              </Page>
            </SplitterSide>
            <SplitterContent>
              <Navigator initialRoute={{component: Skills}}
                         renderPage={this.renderPage}/>
            </SplitterContent>
          </Splitter>
    


  • Ah, found it. isSwipeable={false} makes the scrollbar work perfectly.

      return (
          <Splitter>
            <SplitterSide
              isSwipeable={false}>
    


  • @beebase Glad you got it figured out! This is one I was watching because I have a project coming up soon where I will need to do a horizontal scroller as well. Thanks for the upvote and the feedback!


Log in to reply