当前位置: 首页 > news >正文

前端uniapp列表下拉到底部加载下一页列表【下拉加载页面/带源码/实战】

目录

    • 一. 图片
      • 1.
      • 2.
    • 二.list.vue
    • 三.uni-load-more.vue
    • 最后

一. 图片

1.

请添加图片描述

2.

请添加图片描述

二.list.vue

<template><view><!--列表--><scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'" lower-threshold="50"@scrolltoupper="scrolltoupperFunc" @scrolltolower="scrolltolowerFunc"><view class="p-0-30 bg-white"><view class="d-b-c border-b p-20-0" v-for="(item,index) in tableData" :key="index"><view class="d-s-s f-w d-c flex-1"><text class="30">提现</text><text class="gray9 f22">{{item.create_time}}</text></view><view><text:class="item.apply_status.text=='审核通过'?'green':'gray9'">{{ item.apply_status.text }}</text><text class="red ml20"> {{ item.money }}元</text></view></view><!--<view class=""><view class="bottom-refresh"><view class="d-c-c p30" v-if="tableData.length && no_more"><text class="gray3">亲, 没有更多了</text></view><view v-if="loading" class="d-c-c p30"><text class="gray3">加载中...</text></view></view></view>--><!-- 没有记录 --><view class="d-c-c p30" v-if="tableData.length==0 && !loading"><text class="iconfont icon-wushuju"></text><text class="cont">亲,暂无相关记录哦</text></view><uni-load-more v-else :loadingType="loadingType"></uni-load-more></view></scroll-view></view>
</template><script>import uniLoadMore from "@/components/uni-load-more.vue";export default {components: {uniLoadMore},data() {return {/*手机高度*/phoneHeight: 0,/*可滚动视图区域高度*/scrollviewHigh: 0,/*状态选中*/state_active: -1,/*数据列表*/tableData: [],no_more: false,loading: true,/*最后一页码数*/last_page: 0,/*当前页面*/page: 1,/*每页条数*/list_rows: 20,tableList: [],}},computed: {/*加载中状态*/loadingType() {if (this.loading) {return 1;} else {if (this.tableData.length != 0 && this.no_more) {return 2;} else {return 0;}}}},mounted() {/*初始化*/this.init();/*获取数据*/this.getData();},methods: {/*初始化*/init() {let self = this;uni.getSystemInfo({success(res) {self.phoneHeight = res.windowHeight;self.scrollviewHigh = res.windowHeight;}});},/*获取数据*/getData() {let self = this;let page = self.page;self.loading = true;let list_rows = self.list_rows;self._get('user.cash/lists', {status: -1,page: page || 1,list_rows: list_rows,}, function(data) {self.loading = false;self.tableData = self.tableData.concat(data.data.list.data);self.last_page = data.data.list.last_page;if (data.data.list.last_page <= 1) {self.no_more = true;return false;}});},/*切换*/stateFunc(e) {let self = this;if (e != self.state_active) {self.tableData = [];self.page = 1;self.state_active = e;self.getData();}},/*可滚动视图区域到顶触发*/scrolltoupperFunc() {console.log('滚动视图区域到顶');},/*可滚动视图区域到底触发*/scrolltolowerFunc() {let self = this;if (self.page < self.last_page) {self.page++;self.getData();}self.no_more = true;}}}
</script><style></style>

三.uni-load-more.vue

<template><view class="load-more"><view class="loading-img" v-show="loadingType === 1 && showImage"><view class="load1"><view :style="{background:color}"></view><view :style="{background:color}"></view><view :style="{background:color}"></view><view :style="{background:color}"></view></view><view class="load2"><view :style="{background:color}"></view><view :style="{background:color}"></view><view :style="{background:color}"></view><view :style="{background:color}"></view></view><view class="load3"><view :style="{background:color}"></view><view :style="{background:color}"></view><view :style="{background:color}"></view><view :style="{background:color}"></view></view></view><text class="loading-text" :style="{color:color}">{{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}</text></view>
</template><script>export default {name: "load-more",props: {loadingType: {//上拉的状态:0-loading前;1-loading中;2-没有更多了type: Number,default: 0},showImage: {type: Boolean,default: true},color: {type: String,default: "#999999"},contentText: {type: Object,default () {return {contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "已经到底了"};}}},data() {return {}}}
</script><style>.load-more {display: flex;flex-direction: row;height: 80upx;align-items: center;justify-content: center;}.loading-img {height: 24px;width: 24px;margin-right: 10px;}.loading-text {font-size: 24upx;color: #999;}.loading-img>view {position: absolute;}.load1,.load2,.load3 {height: 24px;width: 24px;}.load2 {transform: rotate(30deg);}.load3 {transform: rotate(60deg);}.loading-img>view view {width: 6px;height: 2px;border-top-left-radius: 1px;border-bottom-left-radius: 1px;background: #777;position: absolute;opacity: 0.2;transform-origin: 50%;-webkit-animation: load 1.56s ease infinite;}.loading-img>view view:nth-child(1) {transform: rotate(90deg);top: 2px;left: 9px;}.loading-img>view view:nth-child(2) {-webkit-transform: rotate(180deg);top: 11px;right: 0px;}.loading-img>view view:nth-child(3) {transform: rotate(270deg);bottom: 2px;left: 9px;}.loading-img>view view:nth-child(4) {top: 11px;left: 0px;}.load1 view:nth-child(1) {animation-delay: 0s;}.load2 view:nth-child(1) {animation-delay: 0.13s;}.load3 view:nth-child(1) {animation-delay: 0.26s;}.load1 view:nth-child(2) {animation-delay: 0.39s;}.load2 view:nth-child(2) {animation-delay: 0.52s;}.load3 view:nth-child(2) {animation-delay: 0.65s;}.load1 view:nth-child(3) {animation-delay: 0.78s;}.load2 view:nth-child(3) {animation-delay: 0.91s;}.load3 view:nth-child(3) {animation-delay: 1.04s;}.load1 view:nth-child(4) {animation-delay: 1.17s;}.load2 view:nth-child(4) {animation-delay: 1.30s;}.load3 view:nth-child(4) {animation-delay: 1.43s;}@-webkit-keyframes load {0% {opacity: 1;}100% {opacity: 0.2;}}
</style>

最后

感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!

相关文章:

前端uniapp列表下拉到底部加载下一页列表【下拉加载页面/带源码/实战】

目录 一. 图片1.2. 二.list.vue三.uni-load-more.vue最后 一. 图片 1. 2. 二.list.vue <template><view><!--列表--><scroll-view scroll-y"true" class"scroll-Y" :style"height: scrollviewHigh px;" lower-threshol…...

超聚变服务器关闭超线程CPU的步骤(完整版)

前言: 笨鸟先飞&#xff0c;好记性不如烂笔头。 我们项目都用不到超线程CPU&#xff0c;所以调测设备的时候都需要关掉&#xff0c;最近新设备换成了超聚变的服务器&#xff0c;这篇记录我关闭&#xff08;超聚变&#xff09;服务器超线程CPU的方法步骤。 关闭超线程CPU的步骤…...

智能驾驶汽车虚拟仿真视频数据理解(一)

赛题官网 datawhale 赛题介绍 跑通demo paddle 跑通demo torch 提交的障碍物取最主要的那个&#xff1f;不考虑多物体提交。障碍物&#xff0c;尽可能选择状态发生变化的物体。如果没有明显变化的&#xff0c;则考虑周边的物体。车的状态最后趋于减速、停止&#xff0c;时序…...

事关Django的静态资源目录设置(Django的setting.py中的三句静态资源(static)目录设置语句分别是什么作用?)

在Django的setting.py中常见的三句静态资源(static)目录设置语句如下&#xff1a; STATICFILES_DIRS [os.path.join(BASE_DIR, static)] STATIC_ROOT os.path.join(BASE_DIR, static) STATIC_URL /static/下面介绍这三句话的作用。 首先说第1句和第2句&#xff1a; STATI…...

Vue.js2+Cesium1.103.0 十四、绘制视锥,并可实时调整视锥姿态

Vue.js2Cesium1.103.0 十四、绘制视锥&#xff0c;并可实时调整视锥姿态 Demo <template><divid"cesium-container"style"width: 100%; height: 100%;"><divclass"control"style"position: absolute;right: 50px;top: 50px…...

批量替换WordPress文章内图片链接

在WordPress使用过程中&#xff0c;如果中途更换了域名&#xff0c;原先文章内的图片使用的是原来的域名&#xff0c;就会造成文章页里面的图片链接无法显示。如果从后台文章挨个修改就比较麻烦。可以通过数据库进行批量替换即可。 使用 PHPMyadmin 打开 数据库&#xff0c;登…...

关于DBMS_STATS.GATHER_DATABASE_STATS_JOB_PROC的一些发现

任务在哪 这个是11g以后的自动收集统计信息的后台任务&#xff0c;10g之前是在dba_scheduler_jobs里查看 SQL> SELECT CLIENT_NAME ,STATUS ,MEAN_INCOMING_TASKS_7_DAYS,MEAN_INCOMING_TASKS_30_DAYS FROM DBA_AUTOTASK_CLIENT WHERE…...

MatrixOne 支持多样化生态工具

近日&#xff0c;云原生数据库 MatrixOne 支持多样化生态工具&#xff0c;包括&#xff1a;数据集成工具、BI 工具和数据计算引擎这三类生态工具。 云原生数据库使得传统数据库得以充分结合云服务的免运维、高弹性、高可扩展、高可用、高性价比优势&#xff0c;又顺应了云端应…...

力扣刷题篇之位运算

系列文章目录 目录 系列文章目录 前言 一、位运算的基本运算 二、位运算的技巧 三、布隆过滤器 总结 前言 本系列是个人力扣刷题汇总&#xff0c;本文是数与位。刷题顺序按照[力扣刷题攻略] Re&#xff1a;从零开始的力扣刷题生活 - 力扣&#xff08;LeetCode&#xff0…...

asp.net core mvc 控制器使用配置

一、在根目录 添加 mysettings.json 文件 mysettings.json 文件代码如下&#xff1a; {"MySettings": {"Name": "独立配置文件","Site": "lt"} }appsettings.json 文件代码如下&#xff1a; {"Logging": {&quo…...

Hadoop学习总结(MapRdeuce的词频统计)

MapRdeuce编程示例——词频统计 一、MapRdeuce的词频统计的过程 二、编程过程 1、Mapper 组件 WordcountMapper.java package com.itcast.mrdemo;import org.apache.hadoop.io.IntWritable; import org.apache.hadoop.io.LongWritable; import org.apache.hadoop.io.Text; …...

PPT基础入门

目录 相关设置快捷键shift 快捷键Ctrl 快捷键Ctrl Shift 组合快捷键快捷键总结 相关设置 设置撤回次数 自动保存 图片压缩 字体嵌入&#xff1a;目的是在不同的电脑上保留已经设置好的字体 多格式导出 &#xff08;1&#xff09;可以导出PDF &#xff08;2&#xff09;可以导…...

Java 语言关键字有哪些

Java 语言关键字有哪些 分类关键字访问控制privateprotectedpublic类&#xff0c;方法和变量修饰符abstractclassextendsfinalimplementsinterfacenativenewstaticstrictfpsynchronizedtransientvolatileenum程序控制breakcontinuereturndowhileifelseforinstanceofswitchcase…...

Go vs Rust:文件上传性能比较

在本文中&#xff0c;主要测试并比较了Go—Gin和Rust—Actix之间的多部分文件上传性能。 设置 所有测试都在配备16G内存的 MacBook Pro M1 上执行。 软件版本为&#xff1a; Go v1.20.5Rust v1.70.0 测试工具是一个基于 libcurl 并使用标准线程的自定义工具&#xff0c;能…...

C# NAudio 音频库

C# NAudio 音频库 NAudio安装NAudio简述简单示例1录制麦克风录制系统声卡WAV格式播放MP3格式播放AudioFileReader读取播放音频MediaFoundationReader 读取播放音频 NAudio安装 项目>NuGet包管理器 搜索NAudio点击安装&#xff0c;自动安装依赖库。 安装成功后工具箱会新增…...

springcloudalibaba-3

一、Nacos Config入门 1. 搭建nacos环境【使用现有的nacos环境即可】 使用之前的即可 2. 在微服务中引入nacos的依赖 <!-- nacos配置依赖 --><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-…...

异步复位同步释放与同步复位打拍

参考链接&#xff1a;复位系列之异步复位同步释放与同步复位打拍...

使用Python进行二维图像的三维重建

2D图像的三维重建是从一组2D图像中创建对象或场景的三维模型的过程。这个技术广泛应用于计算机视觉、机器人技术和虚拟现实等领域。 在本文中&#xff0c;我们将解释如何使用Python执行从2D图像到三维重建的过程。我们将使用TempleRing数据集作为示例&#xff0c;逐步演示这个过…...

go-zero微服务的使用

一、入门案例 1、使用goland创建一个工程 2、新建一个user.proto syntax "proto3";package user; // 这个地方表示生成的go的包名叫user option go_package "./user";message UserInfoRequest {int64 userId 1; }message UserInfoResponse {int64 user…...

Java排序算法之基数排序

基数排序&#xff08;Radix Sort&#xff09;是一种线性时间复杂度的排序算法&#xff0c;其时间复杂度为O(d(nk))&#xff0c;其中d是数字的位数&#xff0c;k是进制数。基数排序是一种非比较排序算法&#xff0c;它按照数位的大小来进行排序。它可以处理正整数、负整数和小数…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

Go 并发编程基础:通道(Channel)的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...