elm package install FabienHenon/elm-infinite-list-view
Infinite list allows you to display a virtual infinite list of items by only showing visible items on screen. This is very useful for very long list of items.
This way, instead of showing you 100+ items, with this package you will only be shown maybe 20 depending on their height and your configuration.
A div element is using the full height of your entire list so that the scroll bar shows a long content.
Inside this element we show a few items to fill the parent element and we move them so that they are visible. Which items to show
is computed using the scrollTop
value from the scroll event.
First you need to add infinite list to your messages and your model.
import InfiniteList
type Msg
= InfiniteListMsg InfiniteList.Model
type alias Model =
{ infiniteList : InfiniteList.Model
, longList : List String
}
Initializes your model.
initModel : Model
initModel =
{ infiniteList = InfiniteList.init
, longList = initialContent
}
You will have to create a Config
for your infinite list.
Note Your Config
should never be held in your model. It should only appear in your view
code.
config : InfiniteList.Config String Msg
config =
InfiniteList.config
{ itemView = itemView
, itemHeight = InfiniteList.constantHeight 20
, containerHeight = 500
}
|> InfiniteList.withOffset 300
|> InfiniteList.withClass "my-class"
itemView : Int -> Int -> String -> Html Msg
itemView idx listIdx item =
div [] [ text item ]
The config
function needs a function to render your items, the items' height and the container's height (You don't have to know
the exact height. You can specify a greater height or the window's height. The more the height is, the more items will be displayed)
itemView
is the function responsible of your items rendering. It takes 3 parameters:
- index of the element to render
- index of the item from your entire list
- item to render
Then, you need to do 2 things in your view:
- Add the
onScroll
attribute - Add the list
view
view : Model -> Html Msg
view model =
div
[ style
[ ( "width", "100%" )
, ( "height", "100%" )
, ( "overflow-x", "hidden" )
, ( "overflow-y", "auto" )
, ( "-webkit-overflow-scrolling", "touch" )
]
, InfiniteList.onScroll InfiniteListMsg
]
[ InfiniteList.view config model.infiniteList model.longList ]
You call onScroll
on the element that must be scrolled and that contains your list. This function returns an Attribute
.
Your element must have a height explicitly set in order to have the scroll event triggered
And then, inside this element, you call the view
function, passing it the config
, the Model
and your long list.
It will render a placeholder div
taking the height your entire list needs, and inside this element, it will render a container
(that you can customize with withCustomContainer
) that will contain the currently visible items of your list.
Finally, all we need to do is to implement the udpdate function.
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
InfiniteListMsg infiniteList ->
( { model | infiniteList = infiniteList }, Cmd.none )
In the update you have to handle the infinite list message. This message contains the updated Model
for the infinite list.
To run the examples go to the examples
directory, install dependencies and run elm-reactor
:
> cd examples/
> elm package install
> elm-reactor