Trust
Trust
  • 发布:2018-10-25 14:23
  • 更新:2019-05-15 16:05
  • 阅读:5231

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。

参考文档:

3 关注 分享
删除这个账号 12003@qq.com siberiawolf37

要回复文章请先登录注册

1132841535@qq.com

1132841535@qq.com

page.$getAppWebview is not a function这个怎么解决
2019-05-15 16:05
526871855@qq.com

526871855@qq.com

回复 fengkuangyibo@163.com:
配置里加"bounce": "none",
2019-05-09 15:27
526871855@qq.com

526871855@qq.com

回复 993200496@qq.com:
"bounce": "none"
2019-05-09 15:27
ryc

ryc

回复 993200496@qq.com:
请问,ios下拉导航和view之间会出现空白区域这个问题解决了没?
2019-04-25 15:03
1171612749@qq.com

1171612749@qq.com

下拉刷新中文字过长的宽度问题怎么解决
2019-03-26 16:51
993200496@qq.com

993200496@qq.com

请问如何禁止ios 下拉,出现白色快情况
2019-02-26 10:03
dadadaso@foxmail.com

dadadaso@foxmail.com

实用
2019-02-25 15:00
fengkuangyibo@163.com

fengkuangyibo@163.com

hi~ "enablePullDownRefresh": true 是禁用/开启下拉刷新。请问 如何禁止滚动?
2018-10-29 17:52