燕芳 發表於 2021-4-7 16:29:00

uni-app 下拉刷新 配置 手动调用 停止下拉刷新

<p><span style="color: rgba(255, 102, 0, 1)"><span style="font-size: 18px; color: rgba(255, 102, 0, 1)"><strong>onPullDownRefresh</strong></span></span><br>在 js 中定义 onPullDownRefresh 处理函数(和onLaunch,onLoad,onShow等生命周期函数同级),监听当前页面用户下拉刷新事件。</p>
<p>首先需要在&nbsp;pages.json&nbsp;里,找到的当前页面的pages节点,并在&nbsp;style&nbsp;选项中开启&nbsp;enablePullDownRefresh。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"><span style="color: rgba(255, 102, 0, 1)">{
    "pages": [
      {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app",
                "enablePullDownRefresh": true,<span style="color: rgba(0, 0, 0, 1)">//设置为true表示当前页面开启下拉刷新</span>
                "backgroundTextStyle": "dark"<span style="color: rgba(0, 0, 0, 1)">//下拉 loading 的样式,仅支持 dark/light</span>
            }
      }
    ],
    "globalStyle": {
      "navigationBarTextStyle": "white",
      "navigationBarBackgroundColor": "#0faeff",
      "backgroundColor": "#fbf9fe"
    }
}
</span></pre>
</div>
<p>  </p>
<ul>
<li>当处理完数据刷新后,<code>uni.stopPullDownRefresh</code>&nbsp;可以停止当前页面的下拉刷新。</li>
</ul>
<h3 id="startpulldownrefresh"><span style="color: rgba(255, 102, 0, 1)"><span style="color: rgba(255, 102, 0, 1)">uni.startPullDownRefresh(OBJECT)</span></span></h3>
<p><span style="color: rgba(0, 0, 0, 1)">开始下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。(详细参数说明请点击uni.startPullDownRefresh(OBJECT)标题到uniapp官网查看)</span></p>
<h3>&nbsp;</h3>
<h3 id="startpulldownrefresh"><span style="text-decoration: underline"><span style="color: rgba(255, 102, 0, 1)"><span style="font-size: 18px; color: rgba(255, 102, 0, 1)"><strong><span>uni.startPullDownRefresh(OBJECT)</span></strong></span></span></span></h3>
<p>在index.vue 停止当前页面下拉刷新</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"><span style="color: rgba(255, 102, 0, 1)">export default {
    data: {
      text: 'uni-app'
    },
    onLoad: function (options) {
      setTimeout(function () {
            console.log('start pulldown');
      }, 1000);
      //uni.startPullDownRefresh();
      uni.startPullDownRefresh({
            success:function(res){
                console.log(res);<span style="color: rgba(0, 0, 0, 1)">//success 返回参数说明</span>
            }
      });<span style="color: rgba(0, 0, 0, 1)">//这里表示当进入页面的时候就开始执行下拉刷新动画</span>
    },
    onPullDownRefresh() {
      <span style="color: rgba(0, 0, 0, 1)">//监听下拉刷新动作的执行方法,每次手动下拉刷新都会执行一次</span>
      console.log('refresh');
      setTimeout(function () {
            uni.stopPullDownRefresh();<span style="color: rgba(0, 0, 0, 1)">//停止下拉刷新动画</span>
      }, 1000);
    }
}
</span></pre>
</div>
<p>更多相关资料可以到uni-app官网查看文档:http://uniapp.dcloud.io/api/ui/pulldown</p><br><br>
来源:https://www.cnblogs.com/a1847786534/p/14628346.html
頁: [1]
查看完整版本: uni-app 下拉刷新 配置 手动调用 停止下拉刷新