A brief analysis of how to create a pull-up load pull-down refresh component in uniapp

uniapp中怎么创建上拉加载下拉刷新组件？下面本篇文章给大家分享一个uniapp 自定义上拉加载下拉刷新组件的实现方法，希望对大家有所帮助！

该组件是结合uview框架写的，主要结合了里面的u-loadmore组件，可配置下拉刷新加载圈的颜色及背景色，暂无数据时的图等，突出的特点就是通过设置组件的高度，适配刘海屏iPhone，且支持嵌套在各种盒子中。

iPhone手机即使我们没有开启原生的下拉刷新，上拉加载，默认也可以进行下拉和上拉的动作，我们可以在配置文件中关闭 "（disableScroll": true ）。

"globalStyle": {
    "disableScroll": true ,
    "navigationStyle": "custom", // 隐藏系统导航栏
    "navigationBarTextStyle": "white" 
},

组件最终实现效果图

了解整个页面的结构，计算准确的滚动组件的高度

配置项个别详解

    //暂无数据的类型，就是根据不同的场景展示不同的暂无数据的图片，
    _type:{
            default:'',
            type:String
    },

比如列表中暂无数据（_type:nodata）

消息列表中暂无数据（_type:nomsg）

    //除了标题栏和状态栏以外的高度
    otherHeight: {
            default: 0,
            type: Number
    },

otherHeight具体指页面中（不确定元素）的高度，不理解请看整个页面的结构图

组件使用

1、在根目录下创建components文件夹，定义全局组件，组件名建议xxx-功能.vue,例如safe-scrollbox.vue

2、注册为全局组件（page.json）

"easycom": {
    "autoscan": true, //是否开启自动扫描，开启后将会自动扫描符合components/组件名称/组件名称.vue目录结构的组件
    "safe-(.*)": "@/components/safe-$1.vue", // 匹配components目录下组件名称/组件名称内的vue文件
    "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},

3、页面内使用

<safe-scrollbox @lowerFun="lowerFun" @refreshFun="refreshFun" :otherHeight="otherHeight"
    _type="nodata" :list="sealListArr" :status="loadStatus" :isRefresh="isRefresh" bgColor="#fff">
    <view class="seal-list-container" slot="contBox">
            <sealList @showActionBox="showActionBox" :list="sealListArr" :loadings="loadings"></sealList>
    </view>
</safe-scrollbox>

组件完整代码

<template>
	<!-- 滚动组件外层的框-->
	<view class="">
		<!-- 滚动区域 -->
		<scroll-view class="scroll-component" :scroll-top="scrollTop" scroll-y="true"
			:style="{
					height: `calc(100vh - ${statusBarHeight}px - ${navbarHeight}px - ${otherHeight}rpx - env(safe-area-inset-bottom) )`,
				}"
			:lower-threshold="150"
			:refresher-triggered="triggered"
			:refresher-enabled="true"
			refresher-default-style="none"
			:refresher-threshold="20"
			@refresherpulling="onPulling"
			@scrolltoupper="upper" @scrolltolower="lower"
			@scroll="scroll"
			@refresherrefresh="refresh"
			@refresherrestore="restore">
			<!-- 下拉刷新提示 -->
			<u-loadmore status="loading" bgColor="#fff" v-if="triggered" :icon-color="activeColor" :color="activeColor" :load-text="refreshText" margin-top="30" margin-bottom="30"/>
			<slot name="contBox"> </slot>
			<!-- 暂无数据 -->
			<view class="no-data-box" v-if="_type&&list.length==0">
				<image src="../static/imgs/nodata.png" v-if="_type==&#39;nodata&#39;" mode="aspectFit"></image>
				<image src="../static/imgs/nofile.png" v-if="_type==&#39;nofile&#39;" mode="aspectFit"></image>
				<image src="../static/imgs/nomsg.png" v-if="_type==&#39;nomsg&#39;" mode="aspectFit"></image>
				<image src="../static/imgs/nospace.png" v-if="_type==&#39;nospace&#39;" mode="aspectFit"></image>
				<image src="../static/imgs/nofile.png" v-if="_type==&#39;nofile&#39;" mode="aspectFit"></image>
			</view>
			<!-- 上拉加载 -->
			<u-loadmore :status="status" :load-text="loadText" margin-top="30" margin-bottom="30"/>
		</scroll-view>
		<!-- 回到顶部 -->
		<view @tap="goTop" class="go-top" v-if="old.scrollTop>500">
			  <u-icon name="arrow-upward" color="#909399" size="56"></u-icon>
		</view>
	</view>
</template>

import { mapGetters } from 'vuex';
export default {
	props: {
		// 这个数组结合暂无数据的类型主要是控制暂无数据模块的展示与隐藏
		list: {
			default: [],
			type: Array
		},
		//暂无数据的类型
		_type: {
			default: '',
			type: String
		},
		//控制上拉加载时提示 loadmore代表还可以继续上拉加载 nomore没有更多数据 loading 加载中
		status: {
			default: 'loadmore',
			type: String
		},
		//结合这个控制下拉刷新时加载圈的显示隐藏
		isRefresh: {
			default: false,
			type: Boolean
		},
		//除了标题栏和状态栏以外的高度
		otherHeight: {
			default: 0,
			type: Number
		},
		//下拉加载时加载圈的背景色
		bgColor: {
			default: '',
			type: String
		},
		//加载中，上拉加载时，暂无更多数据时所提示的文案
		loadText: {
			default: {
				loadmore: '轻轻上拉获取更多数据',
				loading: '努力加载中...',
				nomore: '暂无更多数据'
			},
			type: Object
		}
	},
	computed: {
		triggered() {
			return this.isRefresh;
		},
		...mapGetters(['activeColor', 'statusBarHeight', 'navbarHeight', 'skeletonColor'])
	},
	data() {
		return {
			old: {
				scrollTop: 0
			},
			scrollTop: 0,
			refreshText: {
				loading: '正在获取最新数据...'
			} //刷新文案
		};
	},
	methods: {
		onPulling() {
			// 下拉
			this.$emit('refreshFun');
			// this.triggered = true; //下拉加载，先让其变true再变false才能关闭
		},
		// 自定义下拉刷新控件被下拉
		refresh(e) {},
		// 刷新重置
		restore() {
			// this.triggered = 'restore'; // 需要重置
		},
		// 刷新终止
		onAbort() {
			// console.log("onAbort");
		},
		upper: function(e) {
			console.log(e);
		},
		// 上拉加载
		lower: function(e) {
			// console.log('上拉加载')
			this.$emit('lowerFun');
			// console.log(e)
			// this.status='loading'
		},
		scroll: function(e) {
			this.old.scrollTop = e.detail.scrollTop;
		},
		goTop: function(e) {
			this.scrollTop = this.old.scrollTop;
			this.$nextTick(() => {
				this.scrollTop = 0;
			});
		}
	}
};

.scroll-component {
	width: 750rpx;
	overflow-y: scroll;
}
/deep/ .u-loading-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80rpx;
	width: 750rpx;
}
.go-top {
	position: fixed;
	bottom: 208rpx;
	right: 0;
	z-index: 2;
	background-color: red;
	width: 100rpx;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #606266;
	border-radius: 50%;
}
.no-data-box {
	width: 750rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 20%;
	margin-bottom: 10%;
	image {
		max-width: 600rpx;
	}
}

推荐：《uniapp教程》

The above is the detailed content of A brief analysis of how to create a pull-up load pull-down refresh component in uniapp. For more information, please follow other related articles on the PHP Chinese website!