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

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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

  • B

    Does someone know how to do this?

    0 1 Reply
  • 侍

    @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;
}
    1
  • B

    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>
    0
    B
     1 Reply
  • B

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

      return (
      <Splitter>
        <SplitterSide
          isSwipeable={false}>
    1 1 Reply
  • 侍

    @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!

    0