uni-app 动态控制下拉刷新

最新推荐文章于 2024-08-22 11:53:20 发布

白墨阳

最新推荐文章于 2024-08-22 11:53:20 发布

阅读量2.1k

点赞数

分类专栏： uniapp踩坑记文章标签： uni-app

本文链接：https://blog.csdn.net/TS_144636/article/details/109686772

版权

uniapp踩坑记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

扫码查看搜索：uni-app 动态控制下拉刷新
在这里插入图片描述

前置条件：
开发环境：windows
开发框架：uni-app , H5+，nativeJS
编辑器：HbuilderX 2.8.13
兼容版本：安卓，IOS已作测试
此代码可以直接复制到uni-app项目中使用
正文开始：

首先，在 pages.json 中配置目标页面的 style->enablePullDownRefresh 为 true。
page.json代码如下：

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

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

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

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

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

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