vant有上拉加载吗_vant列表加载上拉刷新

1.话不多说

2.vant有赞

3.上代码

v-model="loading"

:finished="finished"

@load="onLoad"

:offset="10"

>

• {{item.Name}}

  锁定时间：{{item.CreateDate}}

import Vue from 'vue'

import axios from 'axios'

import allApi from '../js/request.js'

// import {PullRefresh} from 'vant'

import { Tab, Tabs } from 'vant';

import { List } from 'vant';

Vue.use(Tab).use(List);

Vue.use(Tabs);

export default {

data(){

return {

loading: false, //是否处于加载状态

finished: false, //是否已加载完所有数据

PageIndex:0,

MyRecommendsData:[],

}

},

created(){

},

methods:{

onl oad() { //上拉加载

let self=this;

self.PageIndex+=1

setTimeout(() => {

axios.post(allApi.MyRecommends, {

Status: 1,

PageIndex: self.PageIndex,

PageSize: 10,

}).then(function (res) {

for(var i=0;i

self.MyRecommendsData.push(

{

CreateDate: res.data.Result.Data[i].CreateDate,

HeadImgUrl: res.data.Result.Data[i].HeadImgUrl,

Name: res.data.Result.Data[i].Name,

SignedTime: res.data.Result.Data[i].SignedTime,

}

)

}

self.loading=false;//成功关闭loading

}).catch(function (res) {

console.log(res);

});

}, 500);

},

},

mounted(){

let winHeight = document.documentElement.clientHeight //视口大小

document.getElementById('list-content').style.height = (winHeight -0) +'px' //调整上拉加载框高度

},

}

.list-content{

/*margin-top:46px;*/

overflow:scroll;

}

.list-item{

text-align:center;

}

/*.mmCustomerlist{*/

/*height: 100%;*/

/*position: fixed;*/

/*top: 0;*/

/*width: 100%;*/

/*overflow-y: scroll;*/

/*}*/

.textalign{

text-align: left;

}

4.over

标签：PageIndex,axios,vant,use,上拉,import,加载

来源： https://blog.csdn.net/weixin_43023873/article/details/99946741