uni-app前端处理瀑布流V2写法

如果后端返回的数据是:

[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]  这个形式一次性返回的话,前端要怎么处理分页并持续加载更多,下面将一步一步展开

本文用到了 uniapp 提供的 scroll-view : 滚动 , 以及 uview 提供的 u-loadmore : 加载更多动画

 

 

目录

一:定义滚动标签

二: 在Style中添加样式,设定滚动高度

三:添加触发滚动相关事件

最后整体代码(由于数据为假,仅供参考,部分地方需要变动地方已标出,需要自己变动):

---

 

一:定义滚动标签

    
        这里放入自己要进行滚动的内容
    
    
    回到顶部

二: 在Style中添加样式,设定滚动高度

/* 开启瀑布流容器 */
.peiZhen-scroll-container {
	height: calc(100vh - 600rpx);
	width: 100%;
}

/* 回到顶部 */
.back-top{
	position: fixed;
	bottom: 100rpx;
	right: 20rpx;
	background-color: #3AD3AE;
	color: #FFFFFF;
	padding: 10rpx 20rpx;
	border-radius: 10rpx;
}

三:添加触发滚动相关事件

最后整体代码(由于数据为假,仅供参考,部分地方需要变动地方已标出,需要自己变动):