shinyMobile (version 0.7.0)

f7VirtualList: High performance list component

Description

Use if many components in f7List

Usage

f7VirtualList(id, items, rowsBefore = NULL, rowsAfter = NULL, cache = TRUE)

Arguments

id

Virtual list unique id.

items

List items. Slot for f7VirtualListItem.

rowsBefore

Amount of rows (items) to be rendered before current screen scroll position. By default it is equal to double amount of rows (items) that fit to screen.

rowsAfter

Amount of rows (items) to be rendered after current screen scroll position. By default it is equal to the amount of rows (items) that fit to screen.

cache

Disable or enable DOM cache for already rendered list items. In this case each item will be rendered only once and all futher manipulations will be with DOM element. It is useful if your list items have some user interaction elements (like form elements or swipe outs) or could be modified.

Examples

# NOT RUN {
if (interactive()) {
 library(shiny)
 library(shinyMobile)
 shiny::shinyApp(
  ui = f7Page(
    title = "My app",
    f7SingleLayout(
      navbar = f7Navbar(
        title = "Virtual Lists",
        hairline = FALSE,
        shadow = TRUE
      ),
      # main content
      f7VirtualList(
        id = "vlist",
        rowsBefore = 2,
        rowsAfter = 2,
        items = lapply(1:20000, function(i) {
          f7VirtualListItem(
            title = paste("Title", i),
            subtitle = paste("Subtitle", i),
            header = paste("Header", i),
            footer = paste("Footer", i),
            right = paste("Right", i),
            content = i,
            media = img(src = "https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg"),
            url = NULL
          )
        })
      )
    )
  ),
  server = function(input, output) {

  }
 )

 # below example will not load with classic f7List
 shiny::shinyApp(
   ui = f7Page(
     title = "My app",
     f7SingleLayout(
       navbar = f7Navbar(
         title = "Virtual Lists",
         hairline = FALSE,
         shadow = TRUE
       ),
       # main content
       f7List(
         lapply(1:20000, function(i) {
           f7ListItem(
             title = paste("Title", i),
             subtitle = paste("Subtitle", i),
             header = paste("Header", i),
             footer = paste("Footer", i),
             right = paste("Right", i),
             content = i,
             media = NULL,
             url = NULL
           )
         })
       )
     )
   ),
   server = function(input, output) {

   }
 )
}
# }