炫意html5
最早CSS3和HTML5移动技术网站之一

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。

参考文档:

  • 获取当前 Webview 的对象实例
  • 条件编译
  • Webview窗口下拉刷新样式

回答

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

Java基础教程Android基础教程