uniapp和uview组件实现下拉触底刷新列表

下面是一个在UniApp中使用uView组件实现下拉触底刷新列表的示例,并使用Axios来请求分页数据列表:

  1. 首先,确保你已经在UniApp项目中添加了uView组件库。你可以在项目根目录执行以下命令安装它们:
npm install uview-ui

或者使用
Hbuilder X 的插件市场进行引入使用,详情请看官网(建议使用)

https://v1.uviewui.com/components/install.html

  1. 在你的Vue页面中,引入uView组件库和Axios库:
import uView from 'uview-ui';
Vue.use(uView);

//或者

import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
  1. 在你的页面data中定义相关的变量:
data() {
  return {
    list: [], // 存储列表数据
    page: 1, // 当前页数
    pageSize: 10, // 每页数据数量
    total: 0, // 总数据条数
    isLoading: false, // 是否正在加载数据
    status: 'loadmore',
	iconType: 'flower',
	loadText: {
		loadmore: '轻轻上拉',
		loading: '努力加载中',
		nomore: '实在没有了'
	},
  }
},
  1. 在mounted生命周期中初始化页面数据,例如在页面加载时请求第一页的数据:
onShow() {
  this.loadData();
},
  1. 编写请求数据的方法,使用uView插件自带的请求方式发送分页数据请求:
methods: {
  loadData() {
    this.$u.get('url', {
        page: this.page,
        pageSize: this.pageSize
    })
    .then(response => {
      const data = response.data;
      this.list = this.list.concat(data.list); // 将返回的数据添加到列表数据中
      this.total = data.total; // 更新总数据条数
    })
    .catch(error => {
      console.error(error);
    });
  }
},
  1. 在template中使用uView的LoadMore组件来实现下拉触底刷新列表的效果:
<template>
  <view>
      <ul v-for="(item, index) in list" :key="index">
        <li>{{ item.title }}</li>
      </ul>
    <u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
  </view>
</template>

具体实例可以看uView官网:https://v1.uviewui.com/components/loadMore.html

7、在生命周期添加下面内容

onReachBottom() {
			let that = this;
			if(this.tableData.length == this.total) return ;
			this.status = 'loading';
			this.page = ++ this.page;
			setTimeout(() => {
				that.loadData(); //请求的接口数据
				if(this.tableData.length == this.total) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		},

在这里插入图片描述

在上述例子中:

  • loadData()方法用于发送请求获取分页数据,并更新页面的数据。
  • list变量用来存储列表数据。
  • status 变量用来标识数据是否正在加载的文字。
  • onReachBottom用于触发获取下一页数据。

以上示例使用了uView的LoadMore组件来实现下拉触底刷新列表,你可以根据自己的需求进行修改和调整,如改变请求的接口地址和参数,修改列表的渲染方式等。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/37792.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Vue3】setup参数细讲!computed计算属性和watch监听属性

setup参数细讲&#xff01;computed计算属性和watch监听属性 setup细讲!setup参数&#xff0c;steup&#xff08;props&#xff0c;context&#xff09;参数1.props&#xff0c;负责接收父组件传过来的值参数2.contextcontext.attrscontext.emitcontext.slots&#xff0c; 插槽…

CSS 伪元素: ::marker 自定义列表序号

::marker 伪元素 ::marker&#xff0c;可作用在任何设置了 display: list-item 的元素或伪元素上&#xff0c;例如<li>和<summary>。 /** <ul><li>Peaches</li><li>Apples</li><li>Plums</li> </ul> */ ul li::…

Java 设计模式——迭代器模式

目录 1.概述2.结构3.案例实现3.1.抽象迭代器3.2.具体迭代器3.3.抽象聚合3.4.具体聚合3.5.测试 4.优缺点5.使用场景6.JDK 源码解析——Iterator 1.概述 迭代器模式 (Iterator Pattern) 是一种行为型设计模式&#xff0c;它提供一种顺序访问聚合对象&#xff08;如列表、集合等&…

Hyperledger Fabric测试网络运行官方Java链码[简约版]

文章目录 启动测试网络使用peer CLI测试链码调用链码 启动测试网络 cd fabric-samples/test-networknetwork.sh的脚本语法是&#xff1a;network.sh <mode> [flag] ./network.sh up./network.sh createChannel在java源码路径下 chmod 744 gradlew vim gradlew :set ffu…

「观察者(Observer)」设计模式 Swift实现

这里写目录标题 介绍设计模式介绍举例 iOS 中已有的 观察者设计模式实现Notification什么是通知机制或者说如何实现通知机制&#xff1f; KVOKVO底层实现如何实现手动KVO&#xff1f; 介绍 设计模式介绍 观察者设计模式&#xff08;Observer Pattern&#xff09;是一种行为型…

【ArcGIS Pro二次开发】(49):村规数据入库【福建省】

之前用Arcpy脚本工具做了一个村规数据入库和主要图纸生成工具。 在使用过程中&#xff0c;感觉对电脑环境比较高&#xff0c;换电脑用经常会一些莫名其妙的错误&#xff0c;bug修得很累。近来随着ArcGIS Pro SDK的熟悉&#xff0c;就有了移植的想法。 这里先把村规数据入库工…

TabLayout+ViewPager实现滚动页面

目录 一、TabLayout介绍 二、TabLayout的常用属性和方法 常用属性&#xff1a; 常用方法&#xff1a; 三、适配器介绍 &#xff08;一&#xff09;、PagerAdapter介绍&#xff1a; &#xff08;二&#xff09;、FragmentPagerAdapter介绍&#xff1a; &#xff08;三&am…

Python结巴中文分词笔记

&#x1f4da; jieba库基本介绍 &#x1f310; jieba库概述 Jieba是一个流行的中文分词库&#xff0c;它能够将中文文本切分成词语&#xff0c;并对每个词语进行词性标注。中文分词是自然语言处理的重要步骤之一&#xff0c;它对于文本挖掘、信息检索、情感分析等任务具有重要…

Android.mk 文件使用解析

和你一起终身学习&#xff0c;这里是程序员Android 经典好文推荐&#xff0c;通过阅读本文&#xff0c;您将收获以下知识点: 一、Android.mk 简介二、Android.mk 的基本格式三、Android.mk 深入学习一四、 Android.mk 深入学习二五、 Android.mk 深入学习三六、 Android.mk 判断…

引入头文件#include <iostream>的时候发生了什么?

<iostream> namespace std {extern istream cin;extern ostream cout;extern ostream cerr;extern ostream clog;extern wistream wcin;extern wostream wcout;extern wostream wcerr;extern wostream wclog;};cin是什么&#xff1f; cin extern istream cin; The objec…

关于Windows 11 docker desktop 运行doris 容器时vm.max_map_count=2000000的设置问题

需要一个简单的测试环境&#xff0c;于是准备用docker启动一个1fe 1be的简单玩一下 如果be容器启动后再去修改 /etc/sysctl.conf sysctl -w vm.max_map_count2000000 这个参数是没用的&#xff0c;be仍然会启动失败 这时可以打开cmd wsl --list C:\Users\pc>wsl --list …

TeeChart for.NET Crack

TeeChart for.NET Crack TeeChart for.NET为各种图表需求提供了图表控件&#xff0c;包括金融、科学和统计等重要的垂直领域。它可以处理您的数据&#xff0c;在各种平台上无缝创建信息丰富、引人入胜的图表&#xff0c;包括Windows窗体、WPF、带有HTML5/Javascript渲染的ASP.N…

用户、角色、权限、菜单--数据库设计

用户角色关联表--user_role id-------------------主键 user_id------------用户ID role_id-------------角色ID create_time------创建时间 is_deleted--------状态&#xff08;0&#xff1a;未删除 1&#xff1a;删除&#xff09; 角色权限关联表--role_permission id------…

JVM回收算法(标记-清除算法, 复制算法, 标记-整理算法)

1.标记-清除算法 最基础的算法&#xff0c;分为两个阶段&#xff0c;“标记”和“清除” 原理&#xff1a; - 标记阶段&#xff1a;collector从mutator根对象开始进行遍历&#xff0c;对从mutator根对象可以访问到的对象都打上一个标识&#xff0c;一般是在对象的header中&am…

LiveGBS流媒体平台GB/T28181功能-作为上级平台对接海康大华华为宇视等下级平台监控摄像机NVR硬件执法仪等GB28181设备

LiveGBS作为上级平台对接海康大华华为宇视等下级平台监控摄像机NVR硬件执法仪等GB28181设备 1、背景说明2、部署国标平台2.1、安装使用说明2.2、服务器网络环境2.3、信令服务配置 3、监控摄像头设备接入3.1、海康GB28181接入示例3.2、大华GB28181接入示例3.3、华为IPC GB28181接…

Mybatis架构简介

文章目录 1.整体架构图2. 基础支撑层2.1 类型转换模块2.2 日志模块2.3 反射工具模块2.4 Binding 模块2.5 数据源模块2.6缓存模块2.7 解析器模块2.8 事务管理模块3. 核心处理层3.1 配置解析3.2 SQL 解析与 scripting 模块3.3 SQL 执行3.4 插件4. 接口层1.整体架构图 MyBatis 分…

程序员的自我修养(2)

目标文件的学习 1.什么是目标文件以及格式 目标文件为编译器编译后生成的文件&#xff0c;就是window下的.obj&#xff0c;linux下的.o文件。与可执行文件格式几乎一样&#xff0c;因为只是缺少链接过程。所以可执行文件&#xff0c;动态链接库&#xff0c;静态链接库&#xf…

【从零到Offer】反射那些事

什么是反射&#xff1f; ​ 反射简单来说&#xff0c;就是在代码运行期间&#xff0c;通过动态指定任意一个类&#xff0c;从而构建对象&#xff0c;并了解该类的成员变量和方法&#xff0c;甚至可以调用任意一个对象的属性和方法。以String对象为例子&#xff0c;传统构造方式…

计算机网络 - http协议 与 https协议(2)

前言 本篇介绍了构造http请求的的五种方式&#xff0c;简单的使用postman构造http请求&#xff0c;进一步了解https, 学习https的加密过程&#xff0c;了解对称密钥与非对称密钥对于加密是如何进行的&#xff0c;如有错误&#xff0c;请在评论区指正&#xff0c;让我们一起交流…

SPEC CPU 2006 在 CentOS 5.0 x86_64 古老系统测试【3】静态编译 invalid run

上篇 SPEC CPU 2006 在 CentOS 5.0 x86_64 古老系统测试【2】_hkNaruto的博客-CSDN博客 修改gcc41.cfg&#xff0c;全部添加上-static 测试指令 runspec -c gcc41.cfg -T all -n 3 -r 1 -I -i ref all 结果&#xff1a;正常运行并生成报告 invalid run Invalid SPEC CFP2006…