Comparison of fast scrolling effect
We use a set of long lists to show the comparison of the effect of the old and new scroll-views under fast scrolling. When a long list is scrolled quickly, the old scroll-view is prone to a white screen, but the new scroll-view will not appear a white screen.
During the fast scrolling process of the Android machine, the old scroll-view response freezes, and it is easy to happen that the scrolling animation is still in progress when the finger leaves the operation. The new scroll-view can keep the interface scrolling effect following the finger, and stop scrolling to end the animation effect slowly.
Comparison of reverse scrolling effect
In scenarios such as dialogue, reverse scrolling is a common function. The old scroll-view does not provide the ability to reverse scroll. Let's take a look at how the old scroll-view completes reverse scrolling. When the dialog data is loading, the dialog list needs to use scroll-into-view or scroll-top to maintain the current scroll position after updating the list data, because there will be a delay in setting the scroll position, so it is prone to interface jumping .
// .js // scroll-view 滚动到顶部时触发
bindscrolltoupper() {
// 先更新列表数据
this.setData({
recycleList: getnewList()
}, () => {
// 更新完数据后再设置滚动位置
this.setData({
scrollintoview: scrollintoview
})
})
}In order to solve the problem of interface jumping, there is also a flipping method in the community, flipping the scroll-view and the sub-elements of the scroll-view.
// .wxss
.reserve {
transform: rotateX(180deg);
}
// .wxmlHowever, after flipping, you will encounter problems such as the finger scrolling direction is opposite to the list scrolling direction, and the scroll-into-view property is invalid. In order to help developers solve a series of problems of reverse scrolling list, the new scroll-view directly provides the reverse attribute to support reverse scrolling, and the scrolling effect is smoother.
How to access the new scroll-view?
The new scroll-view is very simple to use, there are two main steps:
Modify applet configuration
scroll-view add type="list"
// app.json// "renderer": "skyline" After opening, all pages will become custom navigation, you can refer to https://developers.weixin.qq.com/s/Y5Y8rrm37qEY to realize custom navigation // also available Configure "renderer" in page.json: "skyline" Open page by page
{
...
"lazyCodeLoading": "requiredComponents",
"renderer": "skyline"
}
// page.json
{
...
"disableScroll": true,
"navigationStyle": "custom"
}
// page.wxml
...
// 反向滚动
新的 scroll-view 从安卓 8.0.28 / iOS 8.0.30 开始支持，如需兼容低版本需要进行兼容处理。
wx.getSkylineInfo({
success(res) {
if (res.isSupported) {
// 使用新版 scroll-view
} else {
// 使用旧版 scroll-view
}
}
})If you want to experience the long list effect, you can import this code snippet in the WeChat developer tools: https://developers.weixin.qq.com/s/Y5Y8rrm37qEY
For more access details, please refer to the document
How did you do it?
You must be wondering why the new scroll-view can solve this headache?
Let's compare the old and new scroll-view to find out the difference~
old scroll-view
The communication between the logic layer and the rendering layer needs to be converted through JSBridge, which requires a certain amount of time overhead
Rendering adopts asynchronous block rasterization. When the rendering cannot keep up with the scrolling speed, a white screen will appear if it is too late to render
Rendering a large number of nodes takes up a lot of memory, and developers need to optimize themselves to only render on-screen nodes, which leads to high development costs
new scroll-view
The communication between the logic layer and the rendering layer does not need to be converted through JSBridge, which reduces a lot of communication time overhead
Rendering adopts synchronous rasterization, scrolling and rendering are in the same thread, and there will be no white screen
Optimized for long lists, only rendering on-screen nodes, low memory usage, reduced rendering time, and low development and access costs
In addition, the new scroll-view will provide type="custom" to support sticky ceiling effect, grid layout, waterfall flow layout and other capabilities for developers to access and use
