扫码查看搜索: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。