正文

uni-app 动态控制下拉刷新

IP云
IP云V管理员/11 阅读
08/27
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

扫码查看原文，搜索uni-app 动态控制下拉刷新：

前置条件：

  1. 开发环境：windows

  2. 开发框架：uni-app , H5+，nativeJS

  3. 编辑器：HbuilderX 2.8.13

4.兼容版本：安卓，IOS已作测试

此代码可以直接复制到uni-app项目中使用

正文开始：

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

page.json代码如下：

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

2. 在具体逻辑页面:获取当前 Webview 窗口对象

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

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

let isreload=false
currentWebview.setStyle({
pullToRefresh: {
// false关闭下拉刷新；isreload可使用变量动态赋值
support: isreload,
style: plus.os.name === 'Android' ? 'circle' : 'default'
}
});

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

3. 注意事项

  • 此功能仅在 5+App 环境下支持，因此示例中用到了条件编译。

  • pages.json 中的 页面->style->enablePullDownRefresh 必须为 true，也就是说初始化时必须是开启状态。

  • iOS上，关闭bounce回弹效果，另见bounce相关的配置和API。