uni-app的h5端实现动态设置页面的下拉刷新是否开启

发布于 1周前 作者 bupafengyu 来自 Uni-App

uni-app的h5端实现动态设置页面的下拉刷新是否开启

首先定义个方法

// enable 是否可以下拉刷新  
tooglePullDownRefresh(enable) {  
    const page = getCurrentPages().at(-1)  
    // 当且仅当在pages里初始化设置了下拉刷新时才生效  
    if (!page.$page.meta.pullToRefresh.support) return  
    page.$page.meta.enablePullDownRefresh = enable        
}

然后就实现了，但是会出现禁用之后再开启不会出现下拉动效，这就需要去修改 hbuilderx安装路径\plugins\uniapp-cli-vite\node_modules@dcloudio\uni-h5\dist\uni-h5.es.js中，搜索到usePageRefresh方法之后，在此方法中的onMounted hooks的后面加上

watch(  
      () => pageMeta.enablePullDownRefresh,  
      (enablePullDownRefresh) => {  
        enablePullDownRefresh && nextTick(initElement);  
      }  
  );

如图

图片

然后在需要禁用和开启的页面调用tooglePullDownRefresh(false|true)来开启或关闭就可实现在h5上开启或关闭下拉刷新了！当然，如果官方能给个方法那就更好了


Harmonyos Next教程
1 回复

在uni-app中，你可以通过编程方式动态设置页面是否启用下拉刷新功能。这通常涉及修改页面的配置，并在必要时更新页面状态。以下是一个实现该功能的示例代码：

1. 页面配置

首先，在页面的 pages.json 配置文件中，确保页面的 enablePullDownRefresh 属性是可以通过编程方式修改的。虽然 pages.json 是静态配置，但我们可以通过页面内的逻辑动态控制刷新行为。

2. 页面代码

在你的页面脚本中，可以使用 uni.onPullDownRefresh 和 uni.stopPullDownRefresh 方法来控制下拉刷新的行为，并结合页面的逻辑变量来决定是否允许下拉刷新。

<template>
  <view>
    <button @click="toggleRefresh">Toggle PullDown Refresh</button>
    <view v-for="item in items" :key="item.id">{{ item.name }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        // ... more items
      ],
      isRefreshEnabled: true, // 控制下拉刷新是否启用
    };
  },
  methods: {
    toggleRefresh() {
      this.isRefreshEnabled = !this.isRefreshEnabled;
      
      if (this.isRefreshEnabled) {
        // 启用下拉刷新
        this.enablePullDownRefresh();
      } else {
        // 禁用下拉刷新
        this.disablePullDownRefresh();
      }
    },
    enablePullDownRefresh() {
      // 启用下拉刷新
      uni.onPullDownRefresh(() => {
        // 模拟数据刷新
        setTimeout(() => {
          this.items = this.items.map(item => ({ ...item, name: `${item.name} (Updated)` }));
          uni.stopPullDownRefresh(); // 停止下拉刷新动画
        }, 1000);
      });
    },
    disablePullDownRefresh() {
      // 禁用下拉刷新
      uni.offPullDownRefresh(); // 移除下拉刷新监听
    },
  },
  onLoad() {
    // 初始状态，启用下拉刷新
    this.enablePullDownRefresh();
  },
  onUnload() {
    // 页面卸载时，移除下拉刷新监听
    this.disablePullDownRefresh();
  },
};
</script>

3. 解释

  • toggleRefresh 方法切换 isRefreshEnabled 的值，并根据其值启用或禁用下拉刷新。
  • enablePullDownRefresh 方法通过 uni.onPullDownRefresh 注册下拉刷新事件，并在数据刷新完成后调用 uni.stopPullDownRefresh。
  • disablePullDownRefresh 方法通过 uni.offPullDownRefresh 移除下拉刷新监听，从而禁用下拉刷新。
  • 在页面加载 (onLoad) 时，默认启用下拉刷新。
  • 在页面卸载 (onUnload) 时，移除下拉刷新监听，防止内存泄漏。

通过上述代码，你可以动态控制uni-app H5页面中下拉刷新功能的启用与禁用。

回到顶部