Rumah > hujung hadapan web > uni-app > Analisis ringkas tentang cara membuat komponen muat semula tarik-turun beban tarik-turun dalam uniapp

Analisis ringkas tentang cara membuat komponen muat semula tarik-turun beban tarik-turun dalam uniapp

青灯夜游
Lepaskan: 2021-12-20 14:30:02
ke hadapan
2894 orang telah melayarinya

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

Analisis ringkas tentang cara membuat komponen muat semula tarik-turun beban tarik-turun dalam uniapp

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

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

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

组件最终实现效果图

Analisis ringkas tentang cara membuat komponen muat semula tarik-turun beban tarik-turun dalam uniapp

Analisis ringkas tentang cara membuat komponen muat semula tarik-turun beban tarik-turun dalam uniapp

Analisis ringkas tentang cara membuat komponen muat semula tarik-turun beban tarik-turun dalam uniapp

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

Analisis ringkas tentang cara membuat komponen muat semula tarik-turun beban tarik-turun dalam uniapp

配置项个别详解

    //暂无数据的类型,就是根据不同的场景展示不同的暂无数据的图片,
    _type:{
            default:'',
            type:String
    },
Salin selepas log masuk
比如列表中暂无数据(_type:nodata)

Analisis ringkas tentang cara membuat komponen muat semula tarik-turun beban tarik-turun dalam uniapp

消息列表中暂无数据(_type:nomsg)

Analisis ringkas tentang cara membuat komponen muat semula tarik-turun beban tarik-turun dalam uniapp

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

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"
},
Salin selepas log masuk

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>
Salin selepas log masuk

Analisis ringkas tentang cara membuat komponen muat semula tarik-turun beban tarik-turun dalam uniapp

组件完整代码

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

推荐:《uniapp教程

Atas ialah kandungan terperinci Analisis ringkas tentang cara membuat komponen muat semula tarik-turun beban tarik-turun dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan