uniapp实现组件滚动条瀑布流加载

效果 :

滚动条触底后, 将上一页的数据与下一页的数据合并, 滚动条也会自动跳到页数合并的中间

实现步骤 :

1. 使用 uni-app 提供的标签 scroll-view

2. scroll-view 标签提供了添加滚动条属性 scroll-y

3. scroll-view 标签提供了 下拉上拉触底事件 或 自定义刷新事件

4. 在触底刷新事件中, 增加 page 页数属性, 并将 page 属性传给接口

5. 每次触底刷新, 接口返回的数据, 使用 数组 API ---> concat 合并数组

6. 将 合并的数组, 渲染到页面上

组件结构层 :

<scroll-view
	scroll-y
	@scrolltolower="scroll"
	lower-threshold
>
	<view
		v-for="(item, index) in list"
		:key="index"
	>
		<view>{{ item }}</view>
	</view>
</scroll-view>

组件行为层 :

<script>
import { mapActions } from 'vuex';
export default {
	data() {
		return {
			// 列表数据
			list: [],
			// 加载数据页数
			page: 1,
		};
	},

	methods: {
		...mapActions('depotScope', ['getPage']),
        // 父组件接口传过来的数据
		initData(data) {
			// 使用数组API叠加每次翻页的数据
			this.list = this.list.concat(data);
		},

		// 滚动加载事件
		scroll(e) {
			this.page++;
			// 每次翻页将页数传到vuex中, vuex 会将接口需要参数传给接口重新获取数据
			this.getPage(this.page);
		},
	},

};
</script>

最后

以上就是自觉季节为你收集整理的uniapp实现组件滚动条瀑布流加载的全部内容，希望文章能够帮你解决uniapp实现组件滚动条瀑布流加载所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。