vue vant上拉加载 下拉刷新

index.vue <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> <div><div class="zoneBox"><!-- <p class="fl currentZone">{{currentZone}}赛区</p> --><p class="fl currentZone">全国赛区</p><!-- <p class="fr switchZone" @click="switchFun">切换赛区</p> --></div><van-list v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false" @load="onLoad"><div class="list" id="list-content"><div v-show="showlist"><div class="list_item" v-for="(item,index) in list" :key="index"><div @click="detailFun(item.shopInfo.shopId)"><div class="pic1"><van-image fit="cover" :src="item.shopInfo.shopFirstPic.firstPic" /><p>{{item.rank}}</p></div><div class="pic2"><van-image fit="cover" :src="item.shopInfo.shopInsidePics.pic1" /><van-image fit="cover" :src="item.shopInfo.shopInsidePics.pic2" /></div></div><div class="box1"><div class="fl"><p class=" shopName">{{item.shopInfo.shopName.shopName}}</p><p>{{item.votes}}票</p></div><div class="fr vote" @click="voteFun(item.shopInfo.shopId,index)">投票</div></div></div></div><div class="noList" v-show="noList"><img src="../../static/img/default.png" alt=""><p>该赛区暂无参赛信息！</p></div><div class="box"></div></div></van-list></div></van-pull-refresh>data() {return {loading: false,finished: false,isLoading: false, //是否处于下拉刷新状态,page: 1,pageSize: 10,list: [],},onLoad() {var that = this;that.page++;var page = that.page;var openId = that.openId;var areaId = '0000';that.$http.post('url', {page: page,pageSize: 10,areaId: areaId,openId: openId,}, {emulateJSON: true}).then(function(res) {that.loading = false;console.log(res)var rank = res.data.data.ranks;// that.list = res.data.data.ranks;if (res.data.data.ranks != 0) {for (var i = 0; i < rank.length; i++) {that.list.push(rank[i])}} else {that.finished = true;}}, (error) => {console.log(error);});},onRefresh() {setTimeout(() => {this.finished = false;this.isLoading = false;}, 500);},

结束语：

希望这篇文章能帮助到大家。

喜欢的加个关注，点个收藏，给个赞~ 大家一起成长