Vue向下滾動(dòng)加載更多數(shù)據(jù)scroll案例詳解

更新時(shí)間：2021年08月11日 11:11:56 作者：JackieDYH

這篇文章主要介紹了Vue向下滾動(dòng)加載更多數(shù)據(jù)scroll案例詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

vue-infinite-scroll

安裝

npm install vue-infinite-scroll --save

盡管官方也推薦了幾種載入方式，但“最vue”的方式肯定是在main.js中加入

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

實(shí)現(xiàn)范例

官方給的代碼范例是假設(shè)你在根組件寫代碼，實(shí)際上我們肯定是在子組件里寫代碼，所以代碼也需要略作修改，下方只列有用的代碼片段：

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <div v-for="item in data" :key="item.index">{{item.name}}</div>
</div>

 data () {
    return {
      count: 0,
      data: [],
      busy: false
    }
  }

methods: {
    loadMore: function() {
      this.busy = true
      setTimeout(() => {
        for (var i = 0, j = 10; i < j; i++) {
          this.data.push({name: this.count++ })
        }
        console.log(this.data)
        this.busy = false
      }, 1000)
    }
  }

效果

默認(rèn)會(huì)載入10行數(shù)據(jù)，只要往下滾動(dòng)到頁面底部，就會(huì)在1秒后再次加載10條，然后繼續(xù)滾動(dòng)，又會(huì)加載10條。就如下圖：

選項(xiàng)解釋

v-infinite-scroll="loadMore"表示回調(diào)函數(shù)是loadMore
infinite-scroll-disabled="busy"表示由變量busy決定是否執(zhí)行loadMore，false則執(zhí)行loadMore，true則不執(zhí)行，看清楚，busy表示繁忙，繁忙的時(shí)候是不執(zhí)行的。
infinite-scroll-distance="10"這里10決定了頁面滾動(dòng)到離頁尾多少像素的時(shí)候觸發(fā)回調(diào)函數(shù)，10是像素值。通常我們會(huì)在頁尾做一個(gè)幾十像素高的“正在加載中...”，這樣的話，可以把這個(gè)div的高度設(shè)為infinite-scroll-distance的值即可。

其他選項(xiàng)：

infinite-scroll-immediate-check 默認(rèn)值為true，該指令意思是，應(yīng)該在綁定后立即檢查busy的值和是否滾動(dòng)到底。如果你的初始內(nèi)容高度不夠高、不足以填滿可滾動(dòng)的容器的話，你應(yīng)設(shè)為true，這樣會(huì)立即執(zhí)行一次loadMore，會(huì)幫你填充一些初始內(nèi)容。
infinite-scroll-listen-for-event 當(dāng)事件在Vue實(shí)例中發(fā)出時(shí)，無限滾動(dòng)將再次檢查。
infinite-scroll-throttle-delay 檢查busy的值的時(shí)間間隔，默認(rèn)值是200，因?yàn)関ue-infinite-scroll的基礎(chǔ)原理就是，vue-infinite-scroll會(huì)循環(huán)檢查busy的值，以及是否滾動(dòng)到底，只有當(dāng)：busy為false且滾動(dòng)到底，回調(diào)函數(shù)才會(huì)執(zhí)行。

實(shí)戰(zhàn)應(yīng)用

可以看到，上方的例子是在不斷的修改data變量，data變量的數(shù)據(jù)不斷增加，這看起來是沒錯(cuò)的。但是，實(shí)戰(zhàn)中，我們的新數(shù)據(jù)肯定是Ajax獲取的，并不是范例中的用for循環(huán)來灌入無用的自然數(shù)，而且，并不需要setTimeout，我們希望的是頁面滾動(dòng)到底部就立即執(zhí)行Ajax，事實(shí)上，上面代碼中的setTimeout只是為了模擬一個(gè)延遲加載的效果，并不是說必須要延遲1秒才Ajax。

實(shí)戰(zhàn)中該怎么做？

只需要將這段模擬Ajax的代碼改為真正的Ajax獲取數(shù)據(jù)的代碼即可：

 setTimeout(() => {
        for (var i = 0, j = 10; i < j; i++) {
          this.data.push({name: this.count++ })
        }
        console.log(this.data)
        this.busy = false
      }, 1000)

另外，this.busy = false也必須作為Ajax的回調(diào)

vue-scroller

安裝

npm install vue-scroller -d

在main.js里面使用

import VueScroller from 'vue-scroller'
Vue.use(VueScroller)

使用

注意：scroller的使用最好設(shè)置一個(gè)高

<scroller style="top: 100px;" :height='400' :on-refresh="refresh" :on-infinite="infinite" ref="myscroller">
     <div class="order-box" v-for="(item,index) in orderList" :key="index">
                
     </div>
 </scroller>

數(shù)據(jù)

data(){
           return{
                status:'all',
                orderList:[],
                page:0,
                all_page:1,
            }
        },

下拉刷新

refresh (done) {
                setTimeout(()=>{
                    done();
                },1500)
            },

上拉加載更多

注意：done的使用，如果在數(shù)據(jù)沒有賦值到模板前就調(diào)用，就會(huì)一直觸發(fā)下拉函數(shù)，所以我們要在請(qǐng)求成功的回調(diào)中模板賦值后調(diào)用
下拉的函數(shù)是綁定屬性的方式綁定在scroller標(biāo)簽上的，所以我們不需要在created里面調(diào)用一次請(qǐng)求函數(shù)，頁面初始化的時(shí)候回自動(dòng)調(diào)用一次下拉的函數(shù)，從而獲取到第一頁的數(shù)據(jù)

//下拉觸發(fā)
 
infinite (done) {
                if(this.page>=this.all_page){
                    setTimeout(()=>{
                        this.$refs.myscroller.finishInfinite(true);
                    },1500)
                }else{
                    
                    setTimeout(()=>{
                        this.page++;
                        this.getorderList(done)
                        
                    },500);
                }
            },
 
getorderList(done){
                this.$http({
                    method:'post',
                    url:'/seckill/server/orderList',
                    data:{
                        jwt:this.jwt,
                        status:this.status,
                        page:this.page,
                        page_size:5
                    }
                }).then(res=>{
                    if(res.data.code == 0){
                        
                        
                        this.orderList.push.apply(this.orderList,res.data.data.list)
                        this.$refs.myscroller.finishInfinite(true)
 
                        this.page = res.data.data.page
                        this.all_page = res.data.data.all_page
                        done();
                    }else{
                       
                    }
                })
            },

注意

如果涉及到tab欄切換，需要重新設(shè)置scroller的狀態(tài).finishInfinite(false)參數(shù)為false時(shí)會(huì)從新調(diào)用一次上拉函數(shù)，從而重置當(dāng)前scroller的狀態(tài)

goodsAll(){
                this.status = 'all'
                this.page = 0
                this.all_page = 1
                this.$refs.myscroller.finishInfinite(false);
                this.orderList = []
            },

triggerPullToRefresh() 觸發(fā)下拉刷新

finishPullToRefresh() 完成下拉刷新

this.$refs.my_scroller.finishInfinite(false)
finishInfinite(isNoMoreData :Boolean) 當(dāng)參數(shù)為false時(shí)，上拉獲取數(shù)據(jù)可以重新調(diào)用。當(dāng)參數(shù)為true，上拉獲取數(shù)據(jù)回調(diào)函數(shù)停止使用,下拉下部不再顯示loading，會(huì)顯示‘'暫無更多數(shù)據(jù)

vue-infinite-loading

安裝

npm install vue-infinite-loading --save

組件內(nèi)使用

// 組件類使用
import InfiniteLoading from 'vue-infinite-loading';
 
export default {
  components: { InfiniteLoading }
}
 
//使用 基礎(chǔ)版
<infinite-loading
  spinner="spiral"
  @infinite="infiniteHandler"
  :distance="200"
  class="infinite-loading-wrap"
>
  <!-- <div slot="spinner">Loading...</div> -->
  <div slot="no-more">No more Data</div>
  <div slot="no-results">No results Data</div>
  <!-- <div slot="error" slot-scope="{ trigger }">
	Error Data, click <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  @click="trigger">here</a> toretry
  </div> -->
</infinite-loading>

基本用法

<template>
　　<div> 　　　　
		<p v-for="(item,index) in list" :key="index">　　　　　　
			<span v-text="item"></span> 　　　　
		</p> 　　　　
		<!--infinite-loading這個(gè)組件要放在列表的底部，滾動(dòng)的盒子里面！-->
		<infinite-loading
			spinner="spiral"
			@infinite="infiniteHandler"
			:identifier="infiniteId"
			:distance="200"
			class="infinite-loading-wrap"
		>
			<div slot="spinner">Loading...</div>
			<div slot="no-more">No more Data</div>
			<div slot="no-results">No results Data</div>
			<div slot="error" slot-scope="{ trigger }">
			  Error Data, click <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  @click="trigger">here</a> toretry
			</div>
		</infinite-loading>　　
	</div>
</template>
 
<script>　　
import InfiniteLoading from 'vue-infinite-loading';
　　export default {
  　　data() {
    　　return {
		  infiniteId: +new Date(), // 重置滾動(dòng)狀態(tài) 改變
		  page: 1,
      　　list: []
    　　};
  　　},
  　　methods: {
		// 重置滾動(dòng)狀態(tài)
		rest(){
		  this.list = [];
		  this.page = 1;
		  this.infiniteId += 1;
		},
    　　async infiniteHandler($state) {
			// 模仿請(qǐng)求數(shù)據(jù)
			const res = await this.$axios.workList({ page: this.page, pagesize: 20 });
			  if (res.data.list.length) {
				this.page += 1;
				this.list = this.list.concat(res.data.list);
				$state.loaded();
			  } else {
				$state.complete();
			  }
      　　// 這里模仿加載延遲1秒鐘
      　　//setTimeout(() => {
        　//　let temp = [];
        　//　for (let i = this.list.length + 1; i <= this.list.length + 20; i++) {
          //　　temp.push(i);
        　//　}
        　//　this.list = this.list.concat(temp);
        　//　$state.loaded();
      　　//}, 1000);
    　　  //},
  　　},
  　　components: { InfiniteLoading }
　　}
</script>

分頁用法

<template>
  <div>
    <ul>
      <li class="hacker-news-item" v-for="(item, key) in list"></li>
    </ul>
    <infinite-loading @infinite="infiniteHandler">
      <span slot="no-more">No more Data</span>
    </infinite-loading>
  </div>
</template>    
 
<script>
import InfiniteLoading from "vue-infinite-loading";
import axios from "axios";
export default {
  data() {
    return {
      list: [],
    };
  },
  methods: {
    infiniteHandler($state) {
      let api = "http://xxx.com/xxx"; // api為你請(qǐng)求數(shù)據(jù)地址
      axios
        .get(api, {
          params: {
            // 頁碼參數(shù)（10條每頁）
            page: this.list.length / 10 + 1,
          },
        })
        .then((response) => {
          if (response.data.length) {
            // response.data為你請(qǐng)求接口返回的數(shù)組列表
            this.list = this.list.concat(response.data);
            $state.loaded();
            if (this.list.length / 10 === 10) {
              // 這里是加載了10頁數(shù)據(jù)，設(shè)置不在加載
              $state.complete();
            }
          } else {
            $state.complete();
          }
        });
    },
  },
  components: { InfiniteLoading },
};
</script>

說明： $state: 該組件會(huì)傳遞一個(gè)特殊的事件參數(shù)$state給事件處理器來改變加載狀態(tài)，$state參數(shù)包括三個(gè)方法，它們是loaded方法，complete方法和reset方法。

loaded方法用于在每次加載數(shù)據(jù)后停止播放動(dòng)畫，然后該組件將準(zhǔn)備好進(jìn)行下一次觸發(fā)。
complete方法用于完成完整的無限加載，則該組件將不再處理任何滾動(dòng)操作。如果在loaded調(diào)用complete方法時(shí)永遠(yuǎn)不會(huì)調(diào)用該方法，則此組件將顯示用戶的結(jié)果消息，如果不是，則將顯示不再有用戶消息，并且可以按slot設(shè)置其它內(nèi)容
reset方法是將組件返回到原來的狀態(tài)

條件用法

<template>
    <div class="hacker-news-list">
          <div class="hacker-news-header">
            <!--下拉改變-->
            <select v-model="tag" @change="changeFilter()">
                  <option value="story">Story</option>
                  <option value="history">History</option>
            </select>
              <!--或者點(diǎn)擊改變-->
            <button @click="changeFilter()">搜索</button>
          </div>
          <ul>
              <li class="hacker-news-item" v-for="(item, key) in list"></li>
           </ul>
           <!--不要忘記設(shè)置這個(gè) ref="infiniteLoading"-->
          <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading">
            <span slot="no-more">No more data</span>
          </infinite-loading>
    </div>
</template>
 
<script>
    import InfiniteLoading from 'vue-infinite-loading';
    import axios from 'axios';
 
    export default {
          data() {
            return {
                  list: [],
                  tag: 'story',
            };
          },
          methods: {
            infiniteHandler($state) {
                  const api="http://xxx.com/xxx";
                  // api為你請(qǐng)求數(shù)據(jù)地址
                  axios.get(api, {   
                    params: {
                        // 改變的條件參數(shù)
                          tags: this.tag,  
                          page: this.list.length / 10 + 1,
                    },
                  }).then(({ data }) => {
                    if (data.result.length) {
                          this.list = this.list.concat(data.result);
                          $state.loaded();
                          if (this.list.length / 20 === 10) {
                            state.complete();
                          }
                    } else {
                          $state.complete();
                    }
                  });
            },
            //改變條件條用此方法
            changeFilter() {
                  this.list = [];
                  this.$nextTick(() => {
                    this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset');
                  });
            },
          },
          components: { InfiniteLoading }
    }
</script>

防抖

import { debounce } from "lodash"; // 防抖
 
// 防抖
get: debounce(async function () {
  let k = await this.$axios.getList_API();
  console.log(k, "防抖版");
}, 1000),

到此這篇關(guān)于Vue向下滾動(dòng)加載更多數(shù)據(jù)-scroll-案例的文章就介紹到這了,更多相關(guān)Vue加載數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: