uniapp下拉刷新的几种方式

目录

一.enablePullDownRefresh

二.pullToRefresh

三. onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。

---

1.style下的enablePullDownRefresh

（1）enablePullDownRefresh的相关属性

属性	类型	默认值	描述
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark/light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新，详见页面生命周期。

（2）代码展示，在目录为pages.json下

"pages": [
		{
		    "path" : "pages/swiper/swiper",
		    "style" :                                                                                    
		    {
		        "enablePullDownRefresh": true,
				"backgroundTextStyle": "dark",
				
		    }
		    
		}]

2.style下的pullToRefresh

（1）相关属性

support	Boolean	false	是否开启窗口的下拉刷新功能
color	String	#2BD009	颜色值格式为"#RRGGBB"，仅"circle"样式下拉刷新支持此属性。
style	String	Android 平台为 circle；iOS 平台为 default。	可取值："default"——经典下拉刷新样式（下拉拖动时页面内容跟随）；"circle"——圆圈样式下拉刷新控件样式（下拉拖动时仅刷新控件跟随）。
height	String		窗口的下拉刷新控件进入刷新状态的拉拽高度。支持百分比，如"10%"；像素值，如"50px"，不支持rpx。
range	String		窗口可下拉拖拽的范围。支持百分比，如"10%"；像素值，如"50px"，不支持rpx。
offset	String	0px	下拉刷新控件的起始位置。仅对"circle"样式下拉刷新控件有效，用于定义刷新控件下拉时的起始位置。支持百分比，如"10%"；像素值，如"50px"，不支持rpx。如使用了非原生title且需要原生下拉刷新，一般都使用circle方式并将offset调至自定义title的高度
contentdown	Object		目前支持一个属性：caption——在下拉可刷新状态时下拉刷新控件上显示的标题内容。仅对"default"样式下拉刷新控件有效。
contentover	Object		目前支持一个属性：caption——在释放可刷新状态时下拉刷新控件上显示的标题内容。仅对"default"样式下拉刷新控件有效。
contentrefresh	Object		目前支持一个属性：caption——在正在刷新状态时下拉刷新控件上显示的标题内容。仅对"default"样式下拉刷新控件有效。

 

 

 

 

（2）代码展示

"pages": [ 
		    "path" : "pages/swiper/swiper",
		    "style" :                                                                                    
		    {
				"app-plus": {
					"pullToRefresh": {
						"support": true,
						"color": "#ff5500",
						"height": "50px",
						"range": "20px",
						"style": "default",
						"offset": "50px"
					}
				}
		    }
		    
		},

（3）注意事项

• enablePullDownRefresh 与 pullToRefresh->support 同时设置时，后者优先级较高。
• 如果期望在 App 和小程序上均开启下拉刷新的话，请配置页面的 enablePullDownRefresh 属性为 true。
• 若仅期望在 App 上开启下拉刷新，则不要配置页面的 enablePullDownRefresh 属性，而是配置 pullToRefresh->support 为 true。
• 开启原生下拉刷新时，页面里不应该使用全屏高的scroll-view，向下拖动内容时，会优先触发下拉刷新而不是scroll-view滚动
• 原生下拉刷新的起始位置在原生导航栏的下方，如果取消原生导航栏，使用自定义导航栏，原生下拉刷新的位置会在屏幕顶部。如果希望在自定义导航栏下方拉动，只能使用circle方式的下拉刷新，并设置offset参数，将circle圈的起始位置调整到自定义导航栏下方。hello uni-app的扩展组件中有示例。
• 如果想在app端实现更多复杂的下拉刷新，比如美团、京东App那种拉下一个特殊图形，可以使用nvue的组件。HBuilderX 2.0.3+起，新建项目选择新闻模板可以体验
• 如果想在vue页面通过web前端技术实现下拉刷新，插件市场有例子，但前端下拉刷新的性能不如原生，复杂长列表会很卡
• iOS上，default模式的下拉刷新和bounce回弹是绑定的，如果设置了bounce:none，会导致无法使用default下拉刷新

3. onPullDownRefresh 监听该页面用户下拉刷新事件。

• 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。
• 当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。

 （1）uni.startPullDownRefresh(OBJECT)

开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

OBJECT 参数说明

参数名	类型	必填	说明
success	Function	否	接口调用成功的回调
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success 返回参数说明

参数	类型	说明
errMsg	String	接口调用结果

（2）uni.stopPullDownRefresh()

           停止当前页面下拉刷新。

（3）示例

pages.json

{
    "pages": [
        {
        	"path": "pages/index/index",
        	"style": {
        		"navigationBarTitleText": "uni-app",
        		"enablePullDownRefresh": true
        	}
        }
    ],
    "globalStyle": {
    	"navigationBarTextStyle": "white",
    	"navigationBarBackgroundColor": "#0faeff",
    	"backgroundColor": "#fbf9fe"
    }
}

index.vue

// 仅做示例，实际开发中延时根据需求来使用。
export default {
	data() {
		return {
			text: 'uni-app'
		}
	},
	onLoad: function (options) {
		setTimeout(function () {
			console.log('start pulldown');
		}, 1000);
		uni.startPullDownRefresh();
	},
	onPullDownRefresh() {
		console.log('refresh');
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	}
}

总结：uniapp下拉刷新的的方式有以上三种，根据自己的项目需求选着符合自己的