UniApp 下拉刷新实现教程 - 轻松实现页面数据更新

<p>在 UniApp 中，可以使用 uni-app 官方提供的 uni-scroll-view 组件来实现下拉刷新功能。</p>
<ol>
<li>在页面中添加 uni-scroll-view 组件，并设置 ref 属性为 'scroll-view'，如下所示：</li>
</ol>
<pre><code>&lt;template&gt;
  &lt;uni-scroll-view ref='scroll-view'&gt;
    &lt;!-- 页面内容 --&gt;
  &lt;/uni-scroll-view&gt;
&lt;/template&gt;
</code></pre>
<ol start="2">
<li>在页面的 <script> 中，添加下拉刷新的方法，如下所示：</li>
</ol>
<pre><code>&lt;script&gt;
export default {
  methods: {
    onPullDownRefresh() {
      // 下拉刷新的操作
      // 例如重新加载数据
      this.loadData()
    },
    loadData() {
      // 加载数据的操作
    }
  }
}
&lt;/script&gt;
</code></pre>
<ol start="3">
<li>在 mounted 生命周期钩子函数中，监听下拉刷新事件，并调用下拉刷新方法，如下所示：</li>
</ol>
<pre><code>&lt;script&gt;
export default {
  mounted() {
    // 监听下拉刷新事件
    uni.$on('pullDownRefresh', () =&gt; {
      // 调用下拉刷新方法
      this.onPullDownRefresh()
      // 停止下拉刷新动画
      uni.stopPullDownRefresh({
        success: () =&gt; {
          // 重新计算页面高度
          this.$refs['scroll-view'].refresh()
        }
      })
    })
  }
}
&lt;/script&gt;
</code></pre>
<ol start="4">
<li>在页面中触发下拉刷新事件，如下所示：</li>
</ol>
<pre><code>&lt;template&gt;
  &lt;view @click='pullDownRefresh'&gt;下拉刷新&lt;/view&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
  methods: {
    pullDownRefresh() {
      // 触发下拉刷新事件
      uni.startPullDownRefresh()
    }
  }
}
&lt;/script&gt;
</code></pre>
<p>这样就可以实现 UniApp 中的下拉刷新功能了。注意，在调用 uni.stopPullDownRefresh() 方法时，需要重新计算页面高度，否则可能会出现页面高度错误的问题。</p>