uni-app中实现动态禁用或开启下拉刷新

发布于 1周前 作者 wuwangju 来自 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。

参考文档：

uni-pull.zip


Harmonyos Next教程
1 回复

在uni-app中，你可以通过控制页面的 onPullDownRefresh 事件和页面的 enablePullDownRefresh 属性来实现动态禁用或开启下拉刷新功能。以下是一个简单的示例，展示了如何在页面中进行这种控制。

首先，确保你的页面已经启用了下拉刷新功能。在页面的 pages.json 配置文件中，确保你的页面配置中包含 enablePullDownRefresh: true。例如：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "enablePullDownRefresh": true
      }
    }
  ]
}

接下来，在你的页面脚本中，你可以通过控制 enablePullDownRefresh 属性来动态禁用或开启下拉刷新。以下是一个示例代码：

<template>
  <view>
    <button @click="toggleRefresh">
      {{ isRefreshEnabled ? '禁用下拉刷新' : '开启下拉刷新' }}
    </button>
    <!-- 其他页面内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      isRefreshEnabled: true, // 初始状态为开启下拉刷新
    };
  },
  methods: {
    toggleRefresh() {
      this.isRefreshEnabled = !this.isRefreshEnabled;
      this.$mp.page.setOption({
        enablePullDownRefresh: this.isRefreshEnabled,
      });
      
      // 如果禁用了下拉刷新，并且当前处于刷新状态，则停止刷新
      if (!this.isRefreshEnabled && this.$mp.page.isRefreshing()) {
        this.$mp.page.stopPullDownRefresh();
      }
    },
    onPullDownRefresh() {
      // 模拟下拉刷新操作
      setTimeout(() => {
        uni.showToast({
          title: '刷新成功',
          icon: 'success',
        });
        this.$mp.page.stopPullDownRefresh(); // 停止刷新动画
      }, 2000);
    },
  },
  onLoad() {
    // 页面加载时设置初始状态
    this.$mp.page.setOption({
      enablePullDownRefresh: this.isRefreshEnabled,
    });
  },
};
</script>

在这个示例中，我们有一个按钮用来切换下拉刷新的启用状态。toggleRefresh 方法会更新 isRefreshEnabled 的值，并通过 this.$mp.page.setOption 方法动态设置页面的 enablePullDownRefresh 属性。

同时，我们还在 onPullDownRefresh 方法中模拟了一个下拉刷新的操作，并在刷新完成后调用 this.$mp.page.stopPullDownRefresh 方法停止刷新动画。

注意，this.$mp.page.setOption 是 uni-app 提供的方法，用于动态更新页面配置。在调用这个方法时，需要确保页面已经加载完成，否则可能无法生效。因此，我们在 onLoad 生命周期中也设置了初始的页面配置。

回到顶部