Trust
Trust
  • 发布:2018-10-25 14:23
  • 更新:2025-05-24 10:22
  • 阅读:66490

uni-app 中实现动态禁用/开启下拉刷新

分类:uni-app

首先,在 pages.json 中配置目标页面的 style->enablePullDownRefresh 为 true。

{  
  "path": "pages/index/index",  
  "style": {  
    "navigationBarTitleText": "uni-app",  
    "enablePullDownRefresh": true  
  }  
}

获取当前 Webview 窗口对象:

const pages = getCurrentPages();  
const page = pages[pages.length - 1];  
const currentWebview = page.$getAppWebview();

根据状态值来切换禁用/开启下拉刷新

currentWebview.setStyle({  
  pullToRefresh: {  
    support: !this.isSupport,  
    style: plus.os.name === 'Android' ? 'circle' : 'default'  
  }  
});  
this.isSupport = !this.isSupport;

这里调用 plus 的 API,是在条件编译下进行的。

详细的示例见附件,下载后解压拖至 HBuilderX 运行即可体验。

注意事项

  • 此功能仅在 5+App 环境下支持,因此示例中用到了条件编译。
  • pages.json 中的 页面->style->enablePullDownRefresh 必须为 true,也就是说初始化时必须是开启状态。
  • iOS上,关闭bounce回弹效果,另见bounce相关的配置和API。

参考文档:

6 关注 分享
删除这个账号 1***@qq.com siberiawolf37 睡不醒哎 2***@qq.com 1***@qq.com

要回复文章请先登录注册

y***@126.com

y***@126.com

回复 9***@qq.com :
export const pullDownRefreshEnableSwitch = (enable) => {
const pages = getCurrentPages()
const page = pages[pages.length - 1]
// #ifdef APP-PLUS
const currentWebview = page.$getAppWebview()
currentWebview.setStyle({
pullToRefresh: {
support: enable,
style: plus.os.name === 'Android' ? 'circle' : 'default',
},
})
// #endif

// #ifdef WEB || H5
let el = document.querySelector('.uni-page-refresh')
if (el) {
el.style.display = enable ? 'block' : 'none'
} else {
let time = 0
setTimeout(() => {
time++
el = document.querySelector('.uni-page-refresh')
if (time < 20 && !el) {
pullDownRefreshEnableSwitch(enable)
}
}, 100)
}
// #endif
}
2025-05-24 10:22
y***@126.com

y***@126.com

我写了一个方法,提供给大家使用,支持h5 和 app两个平台

export const pullDownRefreshEnableSwitch = (enable) => {
const pages = getCurrentPages()
const page = pages[pages.length - 1]
// #ifdef APP-PLUS
const currentWebview = page.$getAppWebview()
currentWebview.setStyle({
pullToRefresh: {
support: enable,
style: plus.os.name === 'Android' ? 'circle' : 'default',
},
})
// #endif

// #ifdef WEB || H5
let el = document.querySelector('.uni-page-refresh')
if (el) {
el.style.display = enable ? 'block' : 'none'
} else {
let time = 0
setTimeout(() => {
time++
el = document.querySelector('.uni-page-refresh')
if (time < 20 && !el) {
pullDownRefreshEnableSwitch(enable)
}
}, 100)
}
// #endif
}
2025-05-24 10:21
靐齉齾麤龖龗

靐齉齾麤龖龗

回复 1***@qq.com :
看看这个。。我自己用发现没问题,h5哈 https://ask.dcloud.net.cn/article/41446
2025-02-14 15:53
1***@qq.com

1***@qq.com

回复 9***@qq.com :
同问
2025-02-14 15:04
少年心事当浮云

少年心事当浮云

大家好 h5可以支持
2024-12-24 16:05
及时入坑

及时入坑

nvue 关闭再开启 下拉 loading 动画 会向上移动,多次操作,直至 看不见 loading动画,怎么解决?
2024-10-15 10:55
9***@qq.com

9***@qq.com

你好,现在支持H5端了吗? 现在调用还是显示page.$getAppWebview is not a function
2024-03-29 15:57
下下雨

下下雨

设置后有API能禁用吗 有这个需求
2023-12-04 10:20
豫见菀风

豫见菀风

你好,现在支持H5端了吗?
2022-04-13 23:53
言谷

言谷

ios 的nvue页面关闭回弹不行啊,设置bounce为none也不行啊
2021-11-11 12:11