前言

• Hbuilder X 2.7.14.20200618 （不清楚uniapp的版本，用工具版本代替）
• 關于怎么拉：對于下拉還是上拉我是分不清的（不管叫下拉還是上拉，都應該有參照物的。在不說參照物的前提下，叫上拉也行，叫下拉也行。）按照uniapp的說法叫用戶下拉動作/下拉刷新。本文采用下拉刷新頁面的叫法。
• 實際交流中，很多人把下拉理解為加載更多數據。不管怎么拉，比較保險的交流方式是：配合上手勢。一邊比劃一邊說。

如何實現

uniapp 內置提供了名為 onPullDownRefresh 的頁面生命周期函數。該函數可以實現下拉刷新頁面的功能。

監聽用戶下拉動作，一般用于下拉刷新

注意事項

支付寶小程序startPullDownRefresh在開發者工具里會提示暫未開放，請勿使用。

此種情況下，去uniapp的插件市場搜索其它方法。

另，調用uni.startPullDownRefresh函數的效果與用戶手動下拉刷新一致。

實現

開啟下拉刷新頁面的功能

需要在 pages.json 里，找到的當前頁面的pages節點，并在 style 選項中開啟 enablePullDownRefresh。

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

onPullDownRefresh 函數

index.vue

<script>export default {components: {},data() {return {}},async onLoad(options) {console.log("onLoad")},onReady(){},async onPullDownRefresh() {console.log("onPullDownRefresh");},methods: {}} </script>

停止下拉刷新的動畫

當處理完數據刷新后，uni.stopPullDownRefresh 可以停止當前頁面的下拉刷新。

下拉刷新的動畫會自動停止，但為了更好的體驗，手動停止更好一些。

async onPullDownRefresh() {console.log("onPullDownRefresh");await this.loadFavorite();uni.stopPullDownRefresh(); },

參考

https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f

總結

以上是生活随笔為你收集整理的【uniapp】 下拉刷新页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。