目录
一.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的
<refresh>
组件。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下拉刷新的的方式有以上三种,根据自己的项目需求选着符合自己的