uni-app实现下拉刷新和上划加载功能demo

最新推荐文章于 2024-08-22 11:53:20 发布

StreakerHan

最新推荐文章于 2024-08-22 11:53:20 发布

阅读量2.8k

点赞数 3

分类专栏：前端文章标签： uni-app

本文链接：https://blog.csdn.net/m0_37924554/article/details/103398463

版权

本文展示了如何使用uni-app框架实现下拉刷新和上滑加载功能。通过在components目录创建uni-load-more组件，并在需要的vue文件中引入相关代码，结合指定的方法，实现了列表的动态加载和刷新。

摘要由CSDN通过智能技术生成

uni-app实现下拉刷新和上划加载功能demo

在app或者小程序中的列表通常需要下拉刷新列表和上划加载更多数据的功能，下面是利用uni-app框架实现此功能的代码。

在 components 目录下（和 page 目录同级）新建一个 uni-load-more 文件夹，然后创建一个文件 uni-oad- more.vue uni-load-more.vue 完整文件如下

<!--  -->
<template>
	<view class="uni-load-more">
		<view v-show="status === 'loading' && showIcon" class="uni-load-more__img">
			<view class="load1">
				<view :style="{background:color}" />
				<view :style="{background:color}" />
				<view :style="{background:color}" />
				<view :style="{background:color}" />
			</view>
			<view class="load2">
				<view :style="{background:color}" />
				<view :style="{background:color}" />
				<view :style="{background:color}" />
				<view :style="{background:color}" />
			</view>
			<view class="load3">
				<view :style="{background:color}" />
				<view :style="{background:color}" />
				<view :style="{background:color}" />
				<view :style="{background:color}" />
			</view>
		</view>
		<text :style="{color:color}" class="uni-load-more__text">{
   {
    status === 'more' ? contentText.contentdown : (status === 'loading' ? contentText.contentrefresh : contentText.contentnomore) }}</text>
	</view>
</template>

<script>
	export