vant上啦加载 Vant Loading 加载

vant上啦加载

Vant上拉加载是一种常用的网页分页加载技术，它可以在用户滚动到页面底部时自动加载下一页内容。Vant上拉加载可以有效地减少网站的响应时间，并且可以使用户体验更好。

Vant上拉加载的实现原理是通过监听浏览器的onscroll事件，当用户滚动到页面底部时，会发出一个请求来请求下一页内容。当服务器返回数据后，前端会将新数据显示在当前页面中。

// 监听onscroll事件 
window.onscroll = function(){ 
    // 如果已经到达底部 
    if(document.body.scrollTop + window.innerHeight >= document.body.scrollHeight){ 
        // 发送请求 
        sendRequest(); 
    } 
} 

 // 发送请求函数 
function sendRequest(){ 

    // 创建XMLHttpRequest对象  
    var xhr = new XMLHttpRequest();  

    // 设置请求方式  
    xhr.open('GET', 'url', true);  

    // 设置回调函数  
    xhr.onreadystatechange = function(){  

        if(xhr.readyState == 4 && xhr.status == 200){  

            // 获取服务器返回的数据  
            var data = JSON.parse(xhr.responseText);  

            // 显示新数据  

        }  

    };  

    // 发送请求  
    xhr.send();  } 

Vant Loading 加载

import Vue from "vue";
import { Loading } from "vant";

Vue.use(Loading);

<van-loading />
<van-loading type="spinner" />

<van-loading color="#1989fa" />
<van-loading type="spinner" color="#1989fa" />

<van-loading size="24" />
<van-loading type="spinner" size="24px" />

<van-loading size="24px">加载中...</van-loading>

<van-loading size="24px" vertical>加载中...</van-loading>