从零开始仿抖音做一个APP(首页经验列表绘制)
本文主要介绍首页经验标签对应的列表页绘制。
先看看整体布局,Stack组件包裹一个Scroll组件和一个image,Scroll做页面滚动列表,image对应滚动到顶部的按钮,动态显示,如下图所示:
onClick事件的实现,滚动到顶部:
.onClick(() => {
if (this.scrollY >= 300) {
this.scroller.scrollTo({
xOffset: 0,
yOffset: 0,
animation: { duration: 1000, curve: Curve.LinearOutSlowIn }
});
}
})
Scroll的布局对应的是一个瀑布流组件(此处数据源有限,动态做了处理),代码如下:
展示效果如下所示:
本文没有对当前内容做下拉刷新相关的逻辑,大家有需要可以自行接入第三方组件进行调试。