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具体指页面中（不确定元素）的高度，不理解请看整个页面的结构图

组件使用

在根目录下创建components文件夹，定义全局组件，组件名建议xxx-功能.vue,例如safe-scrollbox.vue
注册为全局组件（page.json）

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

页面内使用

<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=='nodata'" mode="aspectFit"></image><image src="../static/imgs/nofile.png" v-if="_type=='nofile'" mode="aspectFit"></image><image src="../static/imgs/nomsg.png" v-if="_type=='nomsg'" mode="aspectFit"></image><image src="../static/imgs/nospace.png" v-if="_type=='nospace'" mode="aspectFit"></image><image src="../static/imgs/nofile.png" v-if="_type=='nofile'" 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 自定义上拉加载下拉刷新组件相关推荐

教你如何使用SwipeRefreshLayout来构建一个上拉加载下拉刷新框架
前言: 基本上所以的移动端应用都有Listview(当然RecyclerView也一样),那必不可少的都会嵌入一个上拉加载下拉刷新的功能.这样能大大的减少用户的流量消耗,同样对于用户也有更好的用户体验 ...
php微信小程序向下滑动,微信小程序功能实现：上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
ionic上拉加载-下拉刷新
ionic上拉加载-下拉刷新 1.上拉加载 <ion-infinite-scroll on-infinite="loadOlderStories()" distance=&q ...
Mint-ui中loadmore(上拉加载下拉刷新)组件在ios中滑动会触发点击事件的解决方法...
bug说明: Mint-ui中loadmore(上拉加载下拉刷新)组件在使用fastclick的情况下 ,在ios设备中滑动会触发点击事件: 解决方法: 我是按需引入,去项目中找到loadmore ...
php mescroll,mescroll.js上拉加载下拉刷新组件使用详解
本文实例为大家分享了上拉加载下拉刷新组件mescroll.js的具体代码,供大家参考,具体内容如下使用注意事项: 1.引入的时候出问题及时看官方给出的解决方案(基本上都必须看): 2.react中一 ...
ios 上拉加载下拉刷新
在一款 App应用中有的时候会用到上拉加载下拉刷新的功能,本人觉得SVPullToRefresh很好用(可以用在UIScrollView上,包括UITableview和UICollectionView ...
图片自动轮播+上拉加载下拉刷新+侧滑菜单+小圆点
//效果图如下 //添加权限 <uses-permission android:name="android.permission.INTERNET"></uses ...
Android 智能上拉加载下拉刷新框架之SmartRefreshLayout
1.说明: SmartRefreshLayout的目标是打造一个强大,稳定,成熟的下拉刷新框架,并集成各种的炫酷.多样.实用.美观的Header和Footer.它不只是支持所有的View,还支持多层嵌 ...
上拉加载下拉刷新了解下
2019独角兽企业重金招聘Python工程师标准>>> 老样子,我们先,哦不,今天我们直接上思路,没有效果图,真的没有我们依旧从界面及逻辑两块进行分析 1.界面上,只分成简单的两块 ...

uniapp 自定义上拉加载下拉刷新组件

介绍

组件最终实现效果图

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

配置项个别详解

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

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

组件使用

组件完整代码

uniapp 自定义上拉加载下拉刷新组件相关推荐

最新文章

热门文章