田昌蓉 發表於 2022-11-3 09:41:00

uni-app 实现下拉刷新功能

<p>我们在运用uni-app开发小程序或h5时，常常需要页面实现下拉刷新功能。</p>
<p>在 js 中定义&nbsp;<code>onPullDownRefresh</code>&nbsp;处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。</p>
<h4>步骤：</h4>
<p><strong>1</strong>、需要在<code>pages.json</code>&nbsp;里，找到的当前页面的pages节点，并在 style 选项中开启<code>enablePullDownRefresh</code>。<br><strong>2</strong>、当处理完数据刷新后，<code>uni.stopPullDownRefresh</code>可以停止当前页面的下拉刷新。</p>
<h4>示例</h4>
<p>pages.json</p>
<pre class="language-java highlighter-hljs"><code>{
    "pages": [
      {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app",
                "enablePullDownRefresh": true
            }
      }
    ],
    "globalStyle": {
      "navigationBarTextStyle": "white",
      "navigationBarBackgroundColor": "#0faeff",
      "backgroundColor": "#fbf9fe"
   }
}</code></pre>
<p>index.vue</p>
<pre class="language-java highlighter-hljs"><code>// 仅做示例，实际开发中延时根据需求来使用。
export default {
    data: {
      text: 'uni-app'
    },
    onShow: function (options) {
      this.loadData();
    },
    onPullDownRefresh() {
      this.loadData()
    }
   methods:{
       loadData() {
                this.$http('/data', {}, 'get').then((res) =&gt; {
                  //数据请求完成之后停止下拉刷新
                  uni.stopPullDownRefresh();
                  if (res.status) {
                        this.activityList = res.data
                  }
                })
            }
      }
}</code></pre>
<blockquote>
<p>演示效果</p>
</blockquote>
<p><img src="https://img2022.cnblogs.com/blog/2368840/202211/2368840-20221103094054011-594386619.png"></p><br><br>
来源：https://www.cnblogs.com/xkboi/p/16853397.html
頁: [1]
查看完整版本: uni-app 实现下拉刷新功能