uniapp实现上拉加载更多

安装uni-load-more插件

<template>
      <view class="container">
          <view v-for="(item,index) in videoList" :key="index">...</view>  //渲染的列表处
          <view v-show="isLoadMore">  //loading加载提示处
                <uni-load-more :status="loadStatus" ></uni-load-more>
          </view>
      </view>
</template>
<script>
export default {
    data() {
          return {
//列表 videoList:[], page:1, pagesize:10, loadStatus:'loading', //加载样式:more-加载前样式,loading-加载中样式,nomore-没有数据样式 isLoadMore:false, //是否加载中 }; }, onl oad() { this.getVideoList() }, onReachBottom(){ //上拉触底函数 if(!this.isLoadMore){ //此处判断,上锁,防止重复请求 this.isLoadMore=true this.page+=1 this.getVideoList() } }, methods:{ getVideoList(){ uni.request({ url: `${this.$baseUrl}/api-video/getlist?page=${this.page}&pagesize=${this.pagesize}`, method: 'GET', success: res => { if(res.data.code==200){ if(res.data.data.list){ this.videoList=this.videoList.concat(res.data.data.list) if(res.data.data.list.length<this.pagesize){ //判断接口返回数据量小于请求数据量,则表示此为最后一页 this.isLoadMore=true this.loadStatus='nomore' }else{ this.isLoadMore=false } }else{ this.isLoadMore=true this.loadStatus='nomore' } }else{ //接口请求失败的处理 uni.showToast({title:res.data.msg,icon:'none'}) this.isLoadMore=false if(this.page>1){ this.page-=1 } } }, fail: () => { //接口请求失败的处理 uni.showToast({title: '服务器开小差了呢,请您稍后再试',icon:'none'}) this.isLoadMore=false if(this.page>1){ this.page-=1 } }, }); }, } </script>

 

上一篇:uniapp小程序组件所在页面的生命周期函数


下一篇:uniapp 小程序扫描二维码