uniapp에서 풀업 로드 풀다운 새로 고침 구성 요소를 생성하는 방법에 대한 간략한 분석-uni-app-php.cn

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

uniapp에서 풀업 로드 풀다운 새로 고침 구성 요소를 생성하는 방법에 대한 간략한 분석

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

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

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

로그인 후 복사

组件最终实现效果图

uniapp에서 풀업 로드 풀다운 새로 고침 구성 요소를 생성하는 방법에 대한 간략한 분석

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

uniapp에서 풀업 로드 풀다운 새로 고침 구성 요소를 생성하는 방법에 대한 간략한 분석

配置项个别详解

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

로그인 후 복사

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

uniapp에서 풀업 로드 풀다운 새로 고침 구성 요소를 생성하는 방법에 대한 간략한 분석

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

uniapp에서 풀업 로드 풀다운 새로 고침 구성 요소를 생성하는 방법에 대한 간략한 분석

//除了标题栏和状态栏以外的高度 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、页面内使用

로그인 후 복사

uniapp에서 풀업 로드 풀다운 새로 고침 구성 요소를 생성하는 방법에 대한 간략한 분석

组件完整代码

로그인 후 복사

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; } }

로그인 후 복사