vue和iview實現Scroll 資料無限滾動

2021-08-20 18:55:26 字數 707 閱讀 8932

在做專案的時候因為資料比較多,一次性全部渲染的話會花費較多的時間,所以,想到每一次渲染10條資料

也想過每一次獲取十條資料然後顯示就行了,就目前自己所知最好的方法是修改介面,一次返回10條,可是這樣子太麻煩了,所以決定一次性請求所有資料,然後每次渲染十條,需要再上拉載入更多

使用的是iview中的元件scroll

以下是獲取資料和封裝資料的方法:

原理是先定義兩個全域性的變數,乙個儲存全部的資料,乙個儲存渲染的資料

在首次獲得資料的時候,往渲染的變數中存入全部資料的前十條:

然後在資料最底時上拉載入新的十條資料:

其中幾個問題都解決了:

1. 當資料小於十條時,如何顯示

2. 當資料渲染完成,不再渲染資料

3. scroll的高度,因為是固定值,會在掛載後獲取整個螢幕的高度,根據自己的需求,對中間的scroll的高度進行計算和設定

以上基本實現了整個功能,或許還有些問題沒有發現,如果發現了新問題會新增進來

用iview標籤切換vue路由元件

iview中有效果不錯的標籤元件,於是就有了把iview中的標籤,作為vue路由鏈結的做法 最開始,打算把router link的tag指定為iview的tag.結果發現這是不可行的,於是改變思路,最終實現 如下 switchtab value all on tab remove tabremove...

vue中使用iview表單驗證時this指標問題

使用iview,在提交時對值b進行驗證,使其不能大於值a export default configrules return callback 此時,validator驗證函式中this.config.a根本取不到值。通過列印this,發現此時this沒有指向vue例項,而是指向呼叫validato...

iView的tree元件實現單選功能

iview中的樹元件有核取方塊可以多選,但是目前還沒有提供單選框的模式,不顯示核取方塊可以提供高亮單選的模式,但是再次點選就被取消了,沒有實現真正的單選 tree 的屬性配置中 multiple 是否支援多選,是在不顯示核取方塊的時候生效的,不能控制核取方塊支不支援多選 實現單選功能中用到了 sho...