15

uni-app 动态控制下拉刷新

 3 years ago
source link: http://www.cnblogs.com/ts119/p/13972366.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

扫码查看原文，搜索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。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK