vant/vue實(shí)現(xiàn)小程序下拉刷新功能方法詳解

更新時(shí)間：2022年12月24日 13:30:48 作者：Nanchen_42

這篇文章主要介紹了vant/vue實(shí)現(xiàn)小程序下拉刷新功能方法詳解,需要的朋友可以參考下

首先先把van-list控件放入列表項(xiàng)中

<van-list
v-model="loading"
:finished="finished"
finished-text="沒有更多了"
@load="onLoad"
>
<list-nav :list="list"></list-nav>
</van-list>

data(){
    return{
        list: [],
    } 
}

通過methods方法進(jìn)行更新數(shù)據(jù)

onLoad() {
      // 異步更新數(shù)據(jù)
      // setTimeout 僅做示例，真實(shí)場景中一般為 ajax 請求
      setTimeout(() => {
        for (let i = 0; i < 0; i++) {
          this.list.push(this.list.length + 1);
        }
 
        // 加載狀態(tài)結(jié)束
        this.loading = false;
 
        // 數(shù)據(jù)全部加載完成
        if (this.list.length >= 6) {
          this.finished = true;
        }
      }, 1000);
    },

以上就是vant/vue實(shí)現(xiàn)下拉刷新功能方法詳解的詳細(xì)內(nèi)容，更多關(guān)于vant/vue實(shí)現(xiàn)下拉刷新功能的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

使用Jenkins Dashboard插件可視化部署的方法
這篇文章主要介紹了使用Jenkins Dashboard插件可視化部署的方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-04-04
HTTP中ETag語法及使用實(shí)戰(zhàn)詳解
這篇文章主要為大家介紹了HTTP中ETag語法及使用實(shí)戰(zhàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
Eclipse 誤刪文件的恢復(fù)與代碼的恢復(fù)詳解
這篇文章主要介紹了Eclipse 誤刪文件的恢復(fù)，代碼的恢復(fù)的相關(guān)資料,需要的朋友可以參考下
2016-09-09
Matlab使用fft畫出信號頻譜圖的方法
這篇文章主要介紹了Matlab使用fft畫出信號頻譜圖的方法,本文通過實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-04-04
使用uniapp打包上架微信小程序完整教程
這篇文章主要介紹了uniapp打包上架微信小程序完整教程,需要的朋友可以參考下
2022-12-12
10 款珍藏已久的 Chrome 瀏覽器插件(程序員必裝)
Chrome 瀏覽器有一個(gè)好處，就是插件極其豐富，只有你想不到的，沒有你找不到的，這恐怕是 Chrome 瀏覽器被眾多愛好者鐘愛的原因吧。今天給大家分享這些插件太強(qiáng)了，Chrome 必裝！尤其程序員
2021-03-03
Scala函數(shù)式編程專題--函數(shù)思想介紹
這篇文章主要介紹了Scala函數(shù)式編程的的相關(guān)資料，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-06-06
淺談測試驅(qū)動(dòng)開發(fā)TDD之爭
在軟件行業(yè)中，神仙打架的名場面，那就不得不提的是2014年的那場——測試驅(qū)動(dòng)開發(fā)（TDD）之爭。
2021-05-05
在VScode上使用latex編輯pdf的方法
這篇文章主要介紹了在VScode上使用latex編輯pdf的相關(guān)知識，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-04-04
app開發(fā)之原生開發(fā)、H5開發(fā)和混合開發(fā)的區(qū)別
這篇文章主要介紹了app開發(fā)之原生開發(fā)、H5開發(fā)和混合開發(fā)的區(qū)別,需要的朋友可以參考下
2019-12-12