<template>标签中:


<view class="" v-if="daShow==1">
  <view class="orderlist-list" @click="goDetail(item.id)" v-for="item in row_list" :key='item.id'>
    <!-- 此处渲染数据,不在此展示 -->
  </view>
  <view class="loading">{{loadingText}}</view>
</view>
<view class="sh_kong" v-if="daShow==2"><img class="sh_kong_img" src="../../static/images/empty_order.png" alt="">暂无内容哦!</view>

<script>
let timer = null 
export default{
  data(){
    return{
      loadingText:'加载更多',
      page: 1,
    }
  },

//上拉加载
onReachBottom() {
  var that = this;
  if(timer != null){
    clearTimeout(timer);
  }
  timer = setTimeout(function(){
    //加载更多数据
    that.getMorenews();
  }, 1000);

},

methods:{

_getMemberList(){
  var that = this
  let data = {
    token: this.$utils.getCache('Token'),
    page: that.page,
    bus_type: that.bus_type,//校内校外
    longitude: longitude,
    latitude: latitude,
  }
  this.$utils.ajaxpost(this.api.getMemberList, data, res => {

  if(res.status==1){
    that.row_list = res.data.rows
    that.page++
    if(res.data.rows.length!=0){
      that.daShow = 1;
    }else{
      that.daShow = 2;
    }
  }
  })
},

getMorenews(){
  var that = this
  that.loadingText = '加载中...';
  //在当前页面显示导航条加载动画。
  uni.showNavigationBarLoading();

  let data = {
    token: this.$utils.getCache('Token'),
    page: this.page,
    bus_type: this.bus_type,//校内校外
    longitude: longitude,
    latitude: latitude,
  }
  this.$utils.ajaxpost(this.api.getMemberList, data, res => {

    if(res.data.rows.length == 0){
      //在当前页面隐藏导航条加载动画。
      that.loadingText = '没有更多数据了';
      uni.hideNavigationBarLoading();
      return false;
    }
    that.page++
    var listeds = res.data.rows;
    that.row_list = that.row_list.concat(listeds)
    uni.hideNavigationBarLoading()
  })
},


  }
}
</script>

uniapp微信小程序 下拉刷新(上拉请求下一页数据)的更多相关文章

  1. 【微信小程序】scroll-view 的上拉加载和下拉刷新

    1.在微信小程序中,想到 下拉刷新 和 上拉加载,如果是整个页面都拖动的话,可以在页面配置中,配置 enablePullDownRefresh 和 onReachBottomDistance 然后在 ...

  2. 微信小程序:wx.request之post请求后端无法获取数据的问题

    前言:小程序的开发中总是踩到各种坑,看文档也不知所云: 例如当我们在写微信小程序接口时,method请求方式有POST和GET两种,为了数据安全,我们会偏向于使用POST请求方式访问服务器端: 问题: ...

  3. 微信小程序开发——列表分页上拉加载封装实现(订单列表为例,订单状态改变后刷新列表滚动位置不变)

    业务需求: 业务需求是给订单列表添加分页功能,也就是上拉加载这种每次只请求加载固定数量的数据. 需求分析: 对业务来说就是简单的分页上拉加载,但是对于技术实现来说,除了要处理分页数据的累加加载,还要处 ...

  4. 微信小程序 无限加载 上拉加载更多

    加载更多,其实就是再次向接口发送请求,把返回的数据,追加到渲染页面的数组里的过程,具体实现实例如下: demo.js // pages/project/project.js const app = g ...

  5. JS+CSS实现的下拉刷新/上拉加载插件

    闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...

  6. wepy小程序实现列表分页上拉加载(1)

    使用wepy开发微信小程序商城第一篇:项目初始化 使用wepy开发微信小程序商城第二篇:路由配置和页面结构 列表页效果图: 1.新建列表页 (1)在pages里面新建一个list.wpy文件 初始代码 ...

  7. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  8. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  9. Android 下拉刷新上拉载入 多种应用场景 超级大放送(上)

    转载请标明原文地址:http://blog.csdn.net/yalinfendou/article/details/47707017 关于Android下拉刷新上拉载入,网上的Demo太多太多了,这 ...

  10. wepy小程序实现列表分页上拉加载(2)

    第一篇:wepy小程序实现列表分页上拉加载(1) 本文接着上一篇内容: 4.优化-添加加载动画 (1)首先写加载动画的结构和样式 打开list.wpy文件 template结构代码: <temp ...

随机推荐

  1. 浅谈-动态路由之OSPF的理解

    路由 在网络中,路由相当于就是一张地图,让路由器知道这个对应的IP数据包应该往哪端口.网段走:而这个"地图"我们称之为路由表,不同的目的IP路由表的下一个跳也不同,其生成方式有又有 ...

  2. `<jsp:getProperty>`动作和`<jsp:setProperty>`动作的使用在一个静态页面填写图书的基本信息,页面信息提交给其他页面,并且在其页面显示。要去将表单元素的值赋值给Java

    <jsp:getProperty>动作和<jsp:setProperty>动作的使用 1.<jsp:getProperty>动作 语法格式: <jsp:get ...

  3. C++算法之旅、02 从木棒切割问题领悟二分法精髓

    172.木棒切割问题 https://sunnywhy.com/problem/172 题目描述 给出n根木棒的长度,现在希望通过切割它们来得到至少k段长度相等的木棒(长度必须是整数),问这些长度相等 ...

  4. Vitepress搭建组件库文档(下)—— 组件 Demo

    上文 <Vitepress搭建组件库文档(上)-- 基本配置>已经讨论了 vitepress 搭建组件库文档的基本配置,包括站点 Logo.名称.首页 home 布局.顶部导航.左侧导航等 ...

  5. 一、SQL介绍

    Mysql 简单来说,数据库就是一个存储数据的仓库,它将数据按照特定的规律存储在磁盘上.为了方便用户组织和管理数据,其专门提供了数据库管理系统.通过数据库管理系统,用户可以有效的组织和管理存储在数据库 ...

  6. 解决oracle18c没有hr用户

    1.查找系统变量ORACLE_HOME的值 2.按照路径寻找sql文件 ORACLE_HOME变量值+demo\schema\human_resources 3.把hr_main.sql脚本文件放在此 ...

  7. Istio(十三):Istio项目实际案例——Online Boutique

    目录 一.模块概览 二.系统环境 三.创建Kubernetes(k8s)集群 3.1 创建Kubernetes(k8s)集群 3.2 Kubernetes集群环境 四.安装istio 4.1 安装Is ...

  8. linux下搭建oh-my-zsh环境

    目标:因为用习惯了zsh的shell环境,所以习惯在服务器上也搭建zsh环境,但是每次搭建都需要Google每一步骤,感觉很麻烦,所以决定记录一下,免得一次次查 1. 安装zsh zsh是一款shel ...

  9. 关于图计算&图学习的基础知识概览:前置知识点学习(Paddle Graph Learning (PGL))

    关于图计算&图学习的基础知识概览:前置知识点学习(Paddle Graph Learning (PGL)) 欢迎fork本项目原始链接:关于图计算&图学习的基础知识概览:前置知识点学习 ...

  10. TKK: 更新 TKK 失败,请检查网络连接 idea翻译错误-IDEA翻译失败-Translation用不了

    IDEA 提示:更新 TKK 失败,请检查网络连接 解决方法: 1.进入 C:\Windows\System32\drivers\etc 找到 hosts文件修改 注意:如果用记事本打开不能修改,则修 ...