PeachScript / vue-infinite-loading

An infinite scroll plugin for Vue.js.
https://peachscript.github.io/vue-infinite-loading/
MIT License
2.67k stars 369 forks source link

無法reset #272

Closed RexHung0302 closed 4 years ago

RexHung0302 commented 4 years ago

首先謝謝作者提供這麼好用的套件。

這邊我做了一個聊天室 視窗裡面有用到 InfiniteLoading 向上进行无限滚动,程式碼如下。

                    //- 聊天視窗
                  .chatArea__chatPart.h-100.p-2.position-relative(id="chatAreaScroll",  ref="chatAreaScroll")
                    InfiniteLoading(direction="top", @infinite="chatOnPullingDown", spinner="bubbles", ref="infiniteLoadingCom")
                      div(slot="no-more") 沒有更多資料了
                      div(slot="no-results") 沒有更多資料了
                      div(slot="error") 發生錯誤,請重整重試一次
                    //- 插入聊天內容
                    template(v-for="(messages,index) in chatMessages")
                      title_date(v-if="messages.previewComponent === 'title_date'", :key="index", :time="messages.time", @showLightBox="showLightBox")
... 下略

在我點擊第一個使用者時會替換我要 Loading 視窗裡的資料 -> chatMessages

可是當我點到第二個人 在替換一次 chatMessages 的內容時

會造成套件卡住 一直出現 Loading Icon 或是 No results :( 等等的提示

我在重新選擇使用者的時候有去判斷是否有用到 InfiniteLoading 了 代碼如下:

let vm = this;
if(vm.$refs.InfiniteLoadingCom){
    vm.$refs.InfiniteLoadingCom.stateChanger.reset(); 
}
...下略

但是似乎沒辦法重新 reset 想問該怎麼解決

PeachScript commented 4 years ago

很高兴你用起来很开心,stateChanger 不是推荐用法,可使用 identifier 属性进行重设:https://peachscript.github.io/vue-infinite-loading/zh/api/#identifier

具体用法可参考文档中的 Filter 案例:https://peachscript.github.io/vue-infinite-loading/zh/guide/use-with-filter-or-tabs.html

该 issue 先关闭了,有需要你可以再打开

RexHung0302 commented 4 years ago

@PeachScript 感謝回覆 已經修正並且成功了 抱歉沒有看清楚文件 後來加上 : identifier 就成功了 非常感謝