如何实现上拉刷新下拉加载

1、在pages.json文件开启 enablePullDownRefresh

"enablePullDownRefresh": true

2、ArRoval是下拉刷新组合的数据

这部分是自己封装的接口

options.url = myApi.listApproval;
           options.method = 'POST';
           options.data = that.persone;
           that.$request(options).then(res => {

}）

（适用于小程序token过期验证，有需要请查看，之前写的有点搂，简单的方式以后更新uni-app 接口封装微信小程序token 过期无痕获取_uni-app的token过期,重新获取token_My&Liu的博客-CSDN博客

微信登录请查看

如何实现微信小程序微信授权登录_My&Liu的博客-CSDN博客

<!-- 审核页面 -->
<template><view></view>
</template><script>
import myApi from '@/utils/app.js';
export default {data() {return {ArRoval: [],persone: {pageNo: 1,pageSize: 10},loadingTxt: '暂无数据'};},created() {let that = this;that.loadDate();},// 下拉刷新数据onPullDownRefresh() {let that = this;that.loadDate('resh');},// 上拉数据加载onReachBottom() {let timer = null;let that = this;//阻止重复加载if (timer !== null) {clearTimeout(timer);}timer = setTimeout(() => that.LoadMore(), 500);},methods: {loadDate(resh) {let that = this;let options = {};options.url = myApi.listApproval;options.method = 'POST';options.data = that.persone;that.$request(options).then(res => {if (res.code == '200') {that.ArRoval = res.result;if (resh) {uni.stopPullDownRefresh();}}});},LoadMore() {let that = this;let options = {};that.loadingTxt = '加载中';that.persone.pageNo++;options.url = myApi.listApproval;options.method = 'POST';options.data = that.persone;that.$request(options).then(res => {if (res.code == '200') {if (that.ArRoval.length >= res.total) {that.loadingTxt = '数据已加载完';return that.loadingTxt;}that.ArRoval = that.ArRoval.concat(res.result);//停止下拉样式uni.stopPullDownRefresh();//隐藏标题读取uni.hideNavigationBarLoading();}});}}
};
</script><style lang="scss">
.clflexBtn {width: 100vh;display: flex;justify-content: center;align-items: center;align-self: center;
}
</style>

3、全部代码

<!-- 审核页面 -->
<template><view><!-- 提示框 --><u-notify ref="uNotify" message="Hi uView"></u-notify><!-- 导航栏 --><u-sticky bgColor="#fff"><u-tabs :list="list" @click="Onroval"></u-tabs></u-sticky><!-- 人员列表 --><!-- 已审批 --><Apoved v-if="current == 1" /><!-- 未审批 --><penroval v-if="current == 0" :ArRoval="ArRoval" /><!-- 下拉刷新 --><u--text type="info" align="center" :text="loadingTxt" /></view>
</template><script>
import myApi from '@/utils/app.js';
import { tabs } from '@/pages/pagesA/mine/mine.js';
// 已审批
import Apoved from '@/pages/pagesA/components/mine/Apoved.vue';
// 未审批
import penroval from '@/pages/pagesA/components/mine/penroval.vue';
export default {components: {penroval,Apoved},data() {return {list: tabs.List,current: 0,ArRoval: [],persone: {pageNo: 1,pageSize: 10},loadingTxt: '暂无数据'};},created() {let that = this;that.loadDate();},// 下拉刷新数据onPullDownRefresh() {let that = this;that.loadDate('resh');},// 上拉数据加载onReachBottom() {let timer = null;let that = this;//阻止重复加载if (timer !== null) {clearTimeout(timer);}timer = setTimeout(() => that.LoadMore(), 500);},methods: {loadDate(resh) {let that = this;let options = {};options.url = myApi.listApproval;options.method = 'POST';options.data = that.persone;that.$request(options).then(res => {if (res.code == '200') {that.ArRoval = res.result;if (resh) {that.Notify('success','刷新成功')uni.stopPullDownRefresh();}}});},Notify(type, mes) {let that = this;that.$refs.uNotify.show({type: type,message: mes});},LoadMore() {let that = this;let options = {};that.loadingTxt = '加载中';that.persone.pageNo++;options.url = myApi.listApproval;options.method = 'POST';options.data = that.persone;that.$request(options).then(res => {if (res.code == '200') {if (that.ArRoval.length >= res.total) {that.loadingTxt = '数据已加载完';return that.loadingTxt;}that.ArRoval = that.ArRoval.concat(res.result);//停止下拉样式uni.stopPullDownRefresh();//隐藏标题读取uni.hideNavigationBarLoading();}});},// tabs事件Onroval(item) {let that = this;let inx = item.index;that.current = inx;}}
};
</script><style lang="scss"></style>

如何实现上拉刷新下拉加载相关推荐

Android之 RecyclerView，CardView 详解和相对应的上拉刷新下拉加载
为什么80%的码农都做不了架构师?>>> 随着 Google 推出了全新的设计语言 Material Design,还迎来了新的 Android 支持库 v7,其中就包含了 M ...
jQuery模拟原生态App上拉刷新下拉加载
jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...
jQuery模拟原生态App上拉刷新下拉加载效果代码
以下任意均可: 1. jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. 原文:http://www.sucaij ...
android上拉刷新下拉加载
本文用的XlistView的上拉刷新下拉加载主Activity package org.com.cctest;import java.text.SimpleDateFormat; import ja ...
Android——Xlistview上拉刷新下拉加载
配置网络权限+xutils包+gson包代码如下: values下修改strings添加直接粘 <?xml version="1.0" encoding="ut ...
uniapp小程序如何通过虚拟列表配合节流，完成上拉刷新下拉加载，避免页面卡顿，提升性能呢？
本文将介绍uniapp小程序中如何使用虚拟列表和节流两种技术实现上拉刷新下拉加载功能,同时避免因渲染大量数据导致的页面卡顿问题. 一.虚拟列表在uniapp小程序开发中,当我们需要渲染大量列表数据时 ...
XListView下拉刷新下拉加载
自定义控件XlistView实现刷新及加载 1.要想实现数据可以上拉也可以下拉效果,可以使用自定义控件XlistView, 配置网络权限+xutils包+gson包代码如下: values下修改st ...
（仿头条APP项目）6.点击过的新闻列表文字变灰和下拉刷新与滚动加载新闻数据
文章目录一.点击过的新闻列表文字变灰效果图实现思路导入ormlite数据库类依赖利用ormlite创建数据库和表创建数据库类MyDbHelper 创建数据库中的新闻实体类NewInfo 页 ...
uni-app下拉刷新触底加载更多
首先在pages.json 配置文件中配置 "enablePullDownRefresh": true 需要在哪用加载就配置在路由的style里两个事件 //下拉刷新 o ...
上拉刷新下拉加载PullToRefreshLayout
2019独角兽企业重金招聘Python工程师标准>>> java pullable代码 package com.example.lsy.tianmi.base.commonview; ...

如何实现上拉刷新下拉加载

如何实现上拉刷新下拉加载相关推荐

最新文章

热门文章