# Rolling container and its application scenario
Smooth scrolling is essential to enhance the user experience. To achieve native-level scrolling and reduce development costs,Skyline Extended the old ScrollView Component, and added some rolling containers for some scenarios. Many new capabilities can sometimes make it difficult for developers to choose, and here are some typical use cases.
# Long list
WebView Down ScrollView Component that is prone to white screen and render stuck when swiping quickly. For the optimization of long lists, it is usually inseparable from on-demand rendering, that is, only rendering in the screen nodes in the ideal state, and nodes beyond the visual area are recycled in time.
Skyline Built in below.Rendering on DemandBut there are certain requirements for the writing, the list item needs to be a direct child node, such as the following structure.
<scroll-view type="list" scroll-y>
<view> a </view>
<view> b </view>
<view> c </view>
</scroll-view>
# Viewport size
ScrollView Viewport size = ScrollView The height of + Specified upper and lower buffers CacheExtent。
Appoint CacheExtent Can optimize the scrolling experience and loading speed, but will increase memory footprint and affect the first screen speed, can be enabled on demand.
The node starts rendering when it enters the viewport area and recycles resources when it leaves the viewport. The granularity of resource recovery is its direct child nodes. when ScrollView When there is only a single child node, in order to ensure its rendering, all the resources can not be recycled, and all the content needs to be fully laid out and drawn, which is poor performance, so it is necessary to spread out the child nodes.
For operational needs ScrollView The content of is often encapsulated into components, making it impossible to serve as direct child nodes. Here is a tip to set the encapsulated component to virtual and open virtualHost: trueWhen really rendered,virtual-comp The node does not exist and the list items are still flat.
<scroll-view type="list" scroll-y>
<virtual-comp>
<view> a </view>
<view> b </view>
<view> c </view>
</virtual-comp>
</scroll-view>
# Full on-demand rendering
On-demand rendering within the Mini Program is divided into two phases.
- List items to create their
DOM node - List Items Draw Up Screen as Needed
ScrollView of list Pattern implements drawing on demand, but the list item's DOM node It is still fully created. As the number of nodes increases, there will be memory pressure.
This framework provides new builder Mode, which can be used list-builder、grid-builder Other component implementation DOM node Created on demand.
The picture above is builder Patterns in Developer Tools wxml Only when the on-screen items are truly created, off-screen items are recycled, and there are always several child nodes when scrolling.
# Sample code snippet
{% Minicode ('z25kA6mv7gPx' ) %}
# ScrollView The three modes of
ScrollView Provides a list of list, Custom custom and nested nested Three rendering mode, the actual development of how to choose it?
# List mode
The default mode, which implements built-in on-demand rendering capabilities, but does not do node recycling. Used when the list items are relatively simple and do not impose significant memory pressure.
When the list is not long, there is no significant performance problem even if the list items are not flattened, and you can useMonad nodeWriting.
<!-- Monad Node Writing, Full Draw -->
<scroll-view type="list" scroll-y>
<view>
<view> a </view>
<view> b </view>
<view> c </view>
</view>
</scroll-view>
<!-- List items as direct child nodes with draw on demand optimization -->
<scroll-view type="list" scroll-y>
<view> a </view>
<view> b </view>
<view> c </view>
</scroll-view>
<!-- List items as part of the list-view Direct child nodes, with draw on demand optimization, ibid. -->
<scroll-view type="custom" scroll-y>
<list-view>
<view> a </view>
<view> b </view>
<view> c </view>
</list-view>
</scroll-view>
# Custom Mode
List scrolling is often combined with special layout capabilities, such as auto-capping when scrolling to the top sticky Effect, or waterfall flow layout.
Skyline This part of the ability is built in, and can be used directly sticky-header and grid-view Component implementation.
list-view The effect of a component is equivalent to the list pattern, and you can write it any way you want if you don't need these special layout capabilities.
It is important to note that in custom mode,ScrollView The direct child node itself is not optimized for drawing on demand. The ability to draw on demand is list-view Components implemented,custom Patterns combine these capabilities.
<scroll-view type="custom" scroll-y>
<sticky-section>
<sticky-header>
<view> h </view>
</sticky-header>
<!-- wrong list-view Child nodes, no draw on demand optimization -->
<view> 1</view>
<view> 2 </view>
<!-- List items as part of the list-view Direct child nodes, with on-demand draw optimization -->
<list-view>
<view> a </view>
<view> b </view>
<view> c </view>
</list-view>
</sticky-section>
</scroll-view>
<scroll-view type="custom" scroll-y>
<sticky-section>
<sticky-header>
<view> h </view>
</sticky-header>
<!-- List items as part of the grid-view Direct child nodes, with on-demand draw optimization -->
<<grid-view type="masonry">
<view> a </view>
<view> b </view>
<view> c </view>
</<grid-view>
</sticky-section>
</scroll-view>
# Sample code snippet
{% Minicode ('hc924ymg7OMi' ) %}
# Nesting pattern
This is mainly for a class of nested scrolling scenarios. As shown below,SwiperItem There is also a longitudinal rolling inside ScrollView Components, when in the internal ScrollView When you slide up, it matches the outer layer ScrollView Generate gesture conflicts, causing the outer page to never scroll.
- Vertical + Horizontal + Vertical Axis Nested Combinations
- Gesture conflicts exist for scrolling containers in the same direction
- Can use hand gestures to negotiate, but the process is more cumbersome
To make the inner and outer scrolling connections smoother, the frame has added <nested-scroll-header and nested-scroll-body Components are used in conjunction with the nested pattern, saving developers the trouble of solving gestures.
<scroll-view type="nested" scroll-y>
<nested-scroll-header>
<view></view>
</nested-scroll-header>
<nested-scroll-body>
<swiper>
<swiper-item>
<scroll-view
type="list"
associative-container="nested-scroll-view"
>
<view>a</view>
<view>b</view>
</scroll-view>
</swiper-item>
<swiper-item>...</swiper-item>
<swiper-item>...</swiper-item>
</swiper>
</nested-scroll-body>
</scroll-view>
# Sample code snippet
{% Minicode ('1IaEOym777Mx') %}
# Draggable container
Half-screen draggable containers within a page are a common type of interaction, allowing the user to expand the list by scrolling. In the past, developers can achieve through the ability to negotiate gestures, but it is more cumbersome.
The framework provides draggable-sheet Components that encapsulate this capability, including the
- Hide scroll bar
- Rolling springback effect
- Scroll to the specified location
snapTo the key point) - Scroll frame callback (implementation of scrolldriven animation)
<draggable-sheet
class="sheet"
initial-child-size="0.5"
min-child-size="0.2"
max-child-size="0.8"
snap="{{true}}"
snap-sizes= [0.4, 0.6]}}"
worklet:onsizeupdate="onSizeUpdate"
>
<scroll-view
scroll-y="{{true}}"
type="list"
associative-container="draggable-sheet"
bounces="{{true}}"
/>
</draggable-sheet>