uniapp上拉刷新,uniapp实现上拉加载更多
uniapp中怎么创建上拉加载下拉刷新组件？下面本篇文章给大家分享一个uniapp自定义上拉加载下拉刷新组件的实现方法，希望对大家有所帮助！
单一应用程序开发（仿饿了么)开发课程：进入学习
该组件是结合uview框架写的，主要结合了里面的优负荷摩尔组件，可配置下拉刷新加载圈的颜色及背景色，暂无数据时的图等，突出的特点就是通过设置组件的高度，适配刘海屏iPhone，且支持嵌套在各种盒子中。
iPhone手机即使我们没有开启原生的下拉刷新，上拉加载，默认也可以进行下拉和上拉的动作，我们可以在配置文件中关闭 "（disableScroll": true ）。
globalStyle: {
disableScroll :真，
navigationStyle: custom ，//隐藏系统导航栏
navigationBarTextStyle: white
},
组件最终实现效果图
了解整个页面的结构，计算准确的滚动组件的高度
配置项个别详解
//暂无数据的类型，就是根据不同的场景展示不同的暂无数据的图片，
_类型：{
默认值：,
类型：字符串
},
比如列表中暂无数据（_type:nodata）
消息列表中暂无数据（_type:nomsg）
//除了标题栏和状态栏以外的高度
其他高度：{
默认值：0,
类型：数量
},其他高度具体指页面中（不确定元素)的高度，不理解请看整个页面的结构图
组件使用
1、在根目录下创建成分文件夹，定义全局组件，组件名建议xxx-功能. vue，例如安全-scrollbox.vue
2、注册为全局组件(page.json)
easycom :
autoscan: true，//是否开启自动扫描，开启后将会自动扫描符合组件/组件名称/组件名称。某视频剪辑软件目录结构的组件
安全-(。*): @/components/safe-$1.vue ，//匹配成分目录下组件名称/组件名称内的某视频剪辑软件文件
^u-(.*): @/u view-ui/components/u-$ 1/u-$ 1。vue
},3、页面内使用
安全滚动框@ lower fun= lower fun @ refresh fun= refresh fun :other height= other height
_ type= no data :list= sealListArr :status= load status :is refresh= is refresh bgColor= # fff
view class= seal-list-container slot= cont box
seal list @ showActionBox= showActionBox :list= sealListArr :loadings= loadings /seal list
/查看
/安全-滚动框
组件完整代码
模板
！-滚动组件外层的框-
视图class=
！-滚动区域-
scroll-view class= scroll-component :scroll-top= scroll top scroll-y= true
:style={
height:` calc(100 VH-$ { status bare height } px-$ { navbarHeight } px-$ { other height } rpx-env(safe-area-inset-bottom))`，
}
：下限阈值=150
:refresh-trigged=“已触发”
:refresh-enabled= true
刷新-默认-样式=无
：刷新者-阈值=20
@refresherpulling=onPulling
@ scroll toupper= upper @ scroll tower= lower
@scroll=scroll
@refresherrefresh=refresh
@refresherrestore=restore
！-下拉刷新提示-
u-load more status= loading bgColor= # fff v-if= triggered :icon-color= active color :color= active color :load-text= refresh text margin-top= 30 margin-bottom= 30 /
插槽名称=contBox /slot
！-暂无数据-
view class= no-data-box v-if= _ typelist。长度==0
图像src=./静态/imgs/无数据。png v-if= _ type== no data mode= aspect fit /image
图像src=./static/imgs/nofile。png v-if= _ type== nofile mode= aspectFit /image
图像src=./static/imgs/nomsg。png v-if= _ type== nomsg mode= aspect fit /image
图像src=./static/imgs/无空格。png v-if= _ type== no space mode= aspect fit /image
图像src=./static/imgs/nofile。png v-if= _ type== nofile mode= aspectFit /image
/查看
！-上拉加载-
u-load more:status= status :load-text= load text margin-top= 30 margin-bottom= 30 /
/滚动视图
！-回到顶部-
view @ tap= goTop class= go-top v-if= old。滚动顶部500
u形图标name= arrow-up color= # 909399 size= 56 /u形图标
/查看
/查看
" vuex "中的/template导入{ mapGetters }；
导出默认值{
道具：{
//这个数组结合暂无数据的类型主要是控制暂无数据模块的展示与隐藏
列表：{
默认值：[],
类型：数组
},
//暂无数据的类型
_类型：{
默认值： ,
类型：字符串
},
//控制上拉加载时提示负载摩尔代表还可以继续上拉加载也不没有更多数据装货加载中
状态：{
默认值：“loadmore”，
类型：字符串
},
//结合这个控制下拉刷新时加载圈的显示隐藏
isRefresh: {
默认值：假的，
类型：布尔型
},
//除了标题栏和状态栏以外的高度
其他高度：{
默认值：0,
类型：数量
},
//下拉加载时加载圈的背景色
bgColor: {
默认值： ,
类型：字符串
},
//加载中，上拉加载时，暂无更多数据时所提示的文案
loadText: {
默认值：{
loadmore:轻轻上拉获取更多数据，
正在加载： 努力加载中.,
不再有了。暂无更多数据
},
类型：对象
}
},
计算值：{
已触发(){
返回这是新鲜的
},
.mapGetters([activeColor ， statusBarHeight ， navbarHeight ， skeletonColor])
},
data() {
返回{
旧：{
滚动条：0
},
滚动条：0,
刷新文本：{
正在加载： 正在获取最新数据.
} //刷新文案
};
},
方法：{
onPulling() {
//下拉
这个. emit(刷新乐趣)；
//这个。触发=真；//下拉加载，先让其变真实的再变错误的才能关闭
},
//自定义下拉刷新控件被下拉
刷新(e) {}，
//刷新重置
restore() {
//这个。triggered=“restore”；//需要重置
},
//刷新终止
onAbort() {
//控制台。log( onAbort )；
},
上部：功能(e) {
控制台。日志(e)；
},
//上拉加载
下部：功能(e) {
//console.log(上拉加载)
这个$ emit(低级趣味)；
//console.log(e)
//this.status=loading
},
滚动：功能(e) {
这个。老了。滚动顶部=e . detail。滚动顶部；
},
goTop:函数(e) {
这个。向上滚动=这个。老了。滚动顶部；
这个. nextTick(()={
这个。scroll top=0；
});
}
}
};滚动组件{
宽度：750rpx
溢出-y:滚动；
}
/深/。u形装载圈{
显示器：flex
对齐-项目：居中；
对齐-内容：居中；
身高：80rpx
宽度：750rpx
}。go-top {
位置：固定；
底部：208rpx
右：0;
z指数：2;
背景色：红色；
宽度：100rpx
高度：100rpx
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
背景：# 606266;
边界半径：50%;
}。无数据框{
宽度：750rpx
显示器：flex
对齐-项目：居中；
对齐-内容：居中；
垫顶：20%;
保证金-底部：10%;
图像{
最大宽度：600rpx
}
}推荐： 《uniapp教程》 以上就是浅析uniapp中怎么创建上拉加载下拉刷新组件的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。