类别:uni-app文档

日期:2020-11-29 浏览:2114 评论:0

  完整代码

<template>
    <view>
  <view v-for="(item, index) in newsList" class="newslist">{{item}}</view>
  <view class="loading">{{loadingText}}</view>
 </view></template><script>var _self, page = 1, timer = null;export default {
 data:{
  newsList:[],
  loadingText:'加载中...'
 },
    onLoad:function(){
  _self = this;
  this.getnewsList();
    },
 onPullDownRefresh:function(){
  this.getnewsList();
 },
 onReachBottom:function(){
  if(timer != null){
   clearTimeout(timer);
  }
  timer = setTimeout(function(){
   _self.getmorenews();
  }, 1000);
 },
 methods:{
  getmorenews : function(){
   if(_self.loadingText != '' && _self.loadingText != '加载更多'){
    return false;
   }
   _self.loadingText = '加载中...';
   uni.showNavigationBarLoading();
   uni.request({
    url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page,
    method: 'GET',
    success: function(res){
     _self.loadingText = '';
     if(res.data == null){
      uni.hideNavigationBarLoading();
      _self.loadingText = '已加载全部';
      return false;
     }
     page++;
     console.log(res);
     _self.newsList = _self.newsList.concat(res.data.split('--hcSplitor--'));
     _self.loadingText = '加载更多';
     uni.hideNavigationBarLoading();
    }
   });
  },
  getnewsList : function(){
   page = 1;
   uni.showNavigationBarLoading();
   uni.request({
    url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page=1',
    method: 'GET',
    success: function(res){
     page++;
     _self.newsList = res.data.split('--hcSplitor--');
     uni.hideNavigationBarLoading();
     uni.stopPullDownRefresh();
     _self.loadingText = '加载更多';
    }
   });
  }
 }}</script><style>.newslist{padding:10px; line-height:60px; font-size:28px;}.loading{text-align:center; line-height:80px;}</style>


本文标题:uni-app 上拉加载更多
本文链接:https://vtzw.com/post/463.html
作者授权:除特别说明外,本文由 零一 原创编译并授权 零一的世界 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。
 您阅读本篇文章共花了: 

 可能感兴趣的文章

评论区

发表评论 / 取消回复

必填

选填

选填

◎欢迎讨论,请在这里发表您的看法及观点。