<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<van-list v-model="loading" :finished="finished" @load="onLoad">
<!-- 内容-->
</van-list>
</van-pull-refresh>
export default{
data(){
return {
list:[],
page:0,//分页总数
number:0,//分页数
loading:false,//控制载入动画
finished:false,//是否再执行 onLoad方法
isLoading:false,//控制下拉重新载入
}
},
methods:{
init(){
let self = this;
let data = {
number : ++self.number
};
axios.get("/get/list", data, re=>{
self.list = re.info.list;
self.page = re.info.page;
self.isLoading = false;
});
},
onRefresh(){
let self = this;
setTimeout(() => {
self.page = 0;
self.init();//加载
},500);
},
onLoad() {
let self = this;
let data = {
page: ++self.number,
};
setTimeout(() => {
axios.get("get/list", {
data,
success: function(re) {
self.page = re.page;
self.list = self.list.concat(re.info.list);//追加数据
self.loading = false; //加载状态结束
// 数据全部加载完成
if (self.totalPage <= self.pageNumber) {
self.finished = true;
}
}
});
}, 500);
}
}
}
原文: http://yiqiao.me/articles/13/record-a-vant-list-drop-down-load-and-drop-down-refresh
版权声明: 自由转载-非商用-非衍生-保持署名 (创意共享3.0许可证)