uni-app 動態控制下拉刷新

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