Uni-App - 自定义组件 - 上拉加载更多

简介: Uni-App - 自定义组件 - 上拉加载更多
<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>
目录
相关文章
|
5月前
uni-app 4.13开发弹出层组件(二)弹出关闭功能
uni-app 4.13开发弹出层组件(二)弹出关闭功能
109 0
|
2月前
|
安全 前端开发 API
【Azure 应用服务】Azure Web App 服务默认支持一些 Weak TLS Ciphers Suite,是否有办法自定义修改呢?
【Azure 应用服务】Azure Web App 服务默认支持一些 Weak TLS Ciphers Suite,是否有办法自定义修改呢?
|
2月前
|
Java 应用服务中间件 Windows
【应用服务 App Service】App Service 中部署Java项目,查看Tomcat配置及上传自定义版本
【应用服务 App Service】App Service 中部署Java项目,查看Tomcat配置及上传自定义版本
|
19天前
|
移动开发 小程序 前端开发
uni-app组件样式修改不生效
uni-app组件样式修改不生效
|
2月前
|
Java 应用服务中间件 Windows
【App Service for Windows】为 App Service 配置自定义 Tomcat 环境
【App Service for Windows】为 App Service 配置自定义 Tomcat 环境
|
2月前
|
XML 数据格式
【Azure Logic App】在Logic App中使用 Transfer XML组件遇见错误 undefined
【Azure Logic App】在Logic App中使用 Transfer XML组件遇见错误 undefined
|
2月前
|
PHP 开发工具 git
【Azure 应用服务】在 App Service for Windows 中自定义 PHP 版本的方法
【Azure 应用服务】在 App Service for Windows 中自定义 PHP 版本的方法
|
2月前
|
开发框架 .NET Docker
【Azure 应用服务】App Service .NET Core项目在Program.cs中自定义添加的logger.LogInformation,部署到App Service上后日志不显示Log Stream中的问题
【Azure 应用服务】App Service .NET Core项目在Program.cs中自定义添加的logger.LogInformation,部署到App Service上后日志不显示Log Stream中的问题
|
2月前
|
安全 Java 应用服务中间件
【Azure 应用服务】App Service中,为Java应用配置自定义错误页面,禁用DELETE, PUT方法
【Azure 应用服务】App Service中,为Java应用配置自定义错误页面,禁用DELETE, PUT方法
【Azure 应用服务】App Service中,为Java应用配置自定义错误页面,禁用DELETE, PUT方法
|
2月前
|
Java 应用服务中间件 Windows
【Azure 应用服务】App Service for Windows 环境中为Tomcat自定义4xx/5xx页面
【Azure 应用服务】App Service for Windows 环境中为Tomcat自定义4xx/5xx页面