uniapp微信小程序 下拉刷新(上拉请求下一页数据)

<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微信小程序 下拉刷新(上拉请求下一页数据)的更多相关文章
- 【微信小程序】scroll-view 的上拉加载和下拉刷新
1.在微信小程序中,想到 下拉刷新 和 上拉加载,如果是整个页面都拖动的话,可以在页面配置中,配置 enablePullDownRefresh 和 onReachBottomDistance 然后在 ...
- 微信小程序:wx.request之post请求后端无法获取数据的问题
前言:小程序的开发中总是踩到各种坑,看文档也不知所云: 例如当我们在写微信小程序接口时,method请求方式有POST和GET两种,为了数据安全,我们会偏向于使用POST请求方式访问服务器端: 问题: ...
- 微信小程序开发——列表分页上拉加载封装实现(订单列表为例,订单状态改变后刷新列表滚动位置不变)
业务需求: 业务需求是给订单列表添加分页功能,也就是上拉加载这种每次只请求加载固定数量的数据. 需求分析: 对业务来说就是简单的分页上拉加载,但是对于技术实现来说,除了要处理分页数据的累加加载,还要处 ...
- 微信小程序 无限加载 上拉加载更多
加载更多,其实就是再次向接口发送请求,把返回的数据,追加到渲染页面的数组里的过程,具体实现实例如下: demo.js // pages/project/project.js const app = g ...
- JS+CSS实现的下拉刷新/上拉加载插件
闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...
- wepy小程序实现列表分页上拉加载(1)
使用wepy开发微信小程序商城第一篇:项目初始化 使用wepy开发微信小程序商城第二篇:路由配置和页面结构 列表页效果图: 1.新建列表页 (1)在pages里面新建一个list.wpy文件 初始代码 ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- Android 下拉刷新上拉载入 多种应用场景 超级大放送(上)
转载请标明原文地址:http://blog.csdn.net/yalinfendou/article/details/47707017 关于Android下拉刷新上拉载入,网上的Demo太多太多了,这 ...
- wepy小程序实现列表分页上拉加载(2)
第一篇:wepy小程序实现列表分页上拉加载(1) 本文接着上一篇内容: 4.优化-添加加载动画 (1)首先写加载动画的结构和样式 打开list.wpy文件 template结构代码: <temp ...
随机推荐
- [笔记] 一种快速求 1 ~ n 逆元的方法
我们现在要求1~n在mod m意义下的逆元(n<m,m为素数). 对于一个[1,n]中的数i,我们令\(k=\lfloor\frac{m}{i}\rfloor,r=m \ mod \ i\) 然 ...
- SECS半导体设备通讯-1 SECS的基本概念
一 什么是SECS SECS(SEMI Equipment Communication Standard),半导体设备通讯标准. 此标准由SEMI (Semiconductor Equipment a ...
- python基础-较复杂数据类型预览
1.初识列表 列表就是队列: 列表是一种有序的,且内容可重复的数据类型: 用list代表列表,也可以用list()定义一个列表,同时定义列表可以直接使用 [ ]: python中列表是 ...
- 【算法】Tarjan
参考资料: 图论相关概念 - OI WIKI | 强连通分量 - OI WIKI 初探tarjan算法 | Tarjan,你真的了解吗 一.概念 • 子图: 对一张图 \(G=(V,E)\),若存在另 ...
- 设计模式常用的UML图------类图
关系 UML将事物之间的联系归纳为6种,对应响应的图形 关联 定义:表示拥有的关系,具有方向性,一个类单向访问一个类,为单向关联.两个类可以相互访问,为双向关联. 聚合 定义:整体与部分的关系. 组合 ...
- 齐博x1到底是怎么的存在?
齐博X1是齐博软件基于thinkphp5开发的内容管理系统,拓展性非常强,后台一键升级,后台提供丰富的频道模块云市插件市场.风格市场.钩子市场,所有都是一键在线安装. 系统已经对接好QQ.微信登录,同 ...
- MRR和Hits@n
使用 MRR/Hits@n 评估链路预测 平均倒数秩(Mean reciprocal rank,MRR) MRR是一种衡量搜索质量的方法.我们取一个未被破坏的节点,找到距离定义为相似性分数的" ...
- 分享几个关于Camera的坑
最近忙于开发一款基于Camera2 API的相机应用,部分功能涉及到广角镜头,因此踩了不少坑,在此与大家分享下以作记录交流... 经过查阅资料发现在安卓上所谓的广角镜头切换其实是用一个逻辑摄像头包含多 ...
- Spring Retry 重试
重试的使用场景比较多,比如调用远程服务时,由于网络或者服务端响应慢导致调用超时,此时可以多重试几次.用定时任务也可以实现重试的效果,但比较麻烦,用Spring Retry的话一个注解搞定所有.话不多说 ...
- 如何在 Inno Setup 中关联多种文件格式
问题描述 Inno Setup 是一款十分强大的 Windows 安装程序制作软件,可以通过编写并编译 iss 脚本来创建安装包.之前都是直接将 Pyinstaller 生成的文件夹压缩为 zip 格 ...