uni-app学习笔记三十五--扩展组件的安装和使用

由于内置组件不能满足日常开发需要,uniapp官方也提供了众多的扩展组件供我们使用。由于不是内置组件,需要安装才能使用。

一、安装扩展插件

安装方法:

1.访问uniapp官方文档组件部分:组件使用的入门教程 | uni-app官网

点击左侧菜单栏中的扩展组件,就可以看到各个组件了。点击需要的组件,在右侧点击下载安装:

在打开的页面右侧点击下载插件并导入,需要本地安装HBuilder X和登录。

点击会打开本地安装的HBuilder X,在弹出的窗口中选择需要导入组件的项目:

等待安装完成即可。 

二、使用扩展插件

复制文档中基本方法中的代码到本地项目中:

主要属性有:

LoadMore Props

属性名类型可选值默认值说明
iconSizeNumber-24指定图标大小
statusStringmore/loading/noMoremoreloading 的状态
showIconBoolean-true是否显示 loading 图标
showTextBoolean-true**[1.3.3新增]**是否显示文本
iconTypeStringsnow/circle/autoauto指定图标样式
colorString-#777777图标和文字颜色
contentTextObject-{contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}各状态文字说明

Status Options

参数名称说明
more加载前
loading加载中
no-more没有更多数据

将上面代码复制到项目中

<view class="loadMore"><uni-load-more status="loading"></uni-load-more>
</view>

更多扩展组件的使用:

<view class="item" @click="onRefresh"><uni-icons type="refreshempty" size="25" color="#888"></uni-icons>
</view>
<view class="item" @click="toTop"><uni-icons type="arrow-up" size="25" color="#888"></uni-icons>
</view>

 size:可以设置图标的大小,color:#888让颜色淡一些。

 效果:

三、小tips:调整网络加载速度

在使用谷歌浏览器调试,有时页面一闪而过不方便查看,可以通过Network中调整加载速度。

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AIStor 的模型上下文协议 (MCP) 服务器: 工作原理

在本系列的前几篇博文中&#xff0c;我们讨论了MinIO AIStor 模型上下文协议 (MCP) 服务器的用户级和管理员级功能。在第一篇博文中&#xff0c;我们学习了如何查看存储桶的内容、分析对象并标记它们以便将来处理。在第二篇博文中&#xff0c;我们还学习了如何使用管理员命令以…

Excel 怎么让透视表以正常Excel表格形式显示

目录 1、创建数据透视表 2、设计 》报表布局 》以表格形式显示 3、设计 》分类汇总 》不显示分类汇总 1、创建数据透视表 2、设计 》报表布局 》以表格形式显示 3、设计 》分类汇总 》不显示分类汇总

汇编语言深度指南:从基础到字符串操作

基础知识 CPU简介 CPU是计算机的核心&#xff0c;负责&#xff1a; 执行机器指令&#xff1a;解码并执行二进制指令 mov eax, 5 ; 将值5移动到EAX寄存器暂存少量数据&#xff1a;通过内部寄存器快速存取访问存储器&#xff1a;读写内存数据 mov [0x1000], eax ; 将EAX值…

树莓派5-ubuntu 24.04 安装 ros环境

在开始安装ros环境前&#xff0c;需要确保已经准备好了以下操作 1.树莓派5开发板&#xff0c;已经烧录了 ubuntu 24.04&#xff0c;并做好了一些基础配置&#xff0c;如&#xff1a;远程访问配置&#xff0c;语言配置&#xff0c;网络配置等 2.新手建议在上面安装一个宝塔面板…

【狂飙AGI】第2课:大模型方向市场分析

目录 &#xff08;一&#xff09;产业规模&#xff08;二&#xff09;政策引导&#xff08;三&#xff09;人才需求&#xff08;四&#xff09;工作年限&#xff08;五&#xff09;年薪分析&#xff08;六&#xff09;薪资情况分析&#xff08;七&#xff09;地域及匹配薪资&am…

word用endnote插入国标参考文献

1.在endnote中先设置output style为我的GB格式 参考 Endnote使用——参考文献的插入及引用_endnote怎么引用参考文献-CSDN博客 已经修改好的GB导出格式&#xff1a;Chinese Std GBT7714 (numeric)-spx.ens Peixuan Shu/Chinese_Std_GBT7714 - 码云 - 开源中国 把这个style…

Peiiieee的Linux笔记(1)

基本指令 1. ls指令 语法&#xff1a;ls [选项][目录或文件] 功能&#xff1a;对于目录&#xff0c;该命令列出该目录下的所有子目录与文件。对于文件&#xff0c;将列出文件名以及其它信息。 -a&#xff1a;列出目录下的所有文件&#xff0c;包括以.开头的隐含文件。 -l&am…

Docker快速构建并启动Springboot程序,快速发布和上线/

Docker部署SpringBoot 1.工作木目录&#xff1a;/mnts/jar_work/vx_kefu/ruoyi_ruoyiwechatinfo 里面的目录是lib文件夹&#xff0c;logs文件夹&#xff0c;Dockerfile文件&#xff0c;SpringBoot的jar包&#xff0c;start.sh的命令&#xff0c;stop.sh的命令,tpid文件进程。 …

RT-Thread Studio 配置使用详细教程

文章目录 一、新建工程1.1 创建基于芯片的工程1.1.1 选择创建的rtt版本1.1.2 配置工程基本属性1.1.3 初创工程目录结构1.1.4 修改时钟配置1.1.5 配置调试下载器 1.2 创建基于开发板的工程 二、配置内核三、配置组件四、配置软件包五、适配配置六、其它问题 一、新建工程 1.1 创…

React 中的 useCallback 入门指南:是真需要,还是假怪?

在学习 React 时&#xff0c;很多人初步接触 useCallback 都有一个同样的疑问&#xff1a; “useCallback 到底是干啥的&#xff1f;不是简单地就是‘缓存一个函数’吗&#xff1f;我一直不明白它真正有什么用。” 这篇文章就来给你一个全方位、实操、有例实的 useCallback 入门…

14.计算机网络End

计算机网络end 一、概念 网络协议三要素&#xff1a;语法、语义、同步TCP/IP中为运输层提供服务的层级&#xff1a;网际层计算机网络性能指标&#xff08;答5个即可&#xff09;&#xff1a; 带宽时延吞吐量往返时间&#xff08;RTT&#xff09;利用率 交换式以太网用户带宽&…

Next.js + Supabase = 快速开发 = 高速公路

Next.js Supabase介绍一下这2个好的&#xff0c;直说重点&#xff1a; ✅ Next.js&#xff1a;React 的“终极形态” 一句话概括&#xff1a; Next.js 是基于 React 的 Web 框架&#xff0c;帮你快速构建全栈应用&#xff0c;支持 SSR&#xff08;服务端渲染&#xff09;、AP…

机器学习用于算法交易(Matlab实现)

机器学习用于算法交易&#xff08;Matlab实现&#xff09; 摘要 随着金融市场的复杂性和交易量的不断增长&#xff0c;传统交易方式逐渐暴露出局限性&#xff0c;算法交易因其高效性和精准性已成为主流趋势。在此背景下&#xff0c;将机器学习融入算法交易具有重要的研究意义…

day64—回溯—组合数(LeetCode-77)

题目描述 给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;n 4, k 2 输出&#xff1a; [[2,4],[3,4],[2,3],[1,2],[1,3],[1,4], ] 示例 2&#xff1a; 输入&#xff1a…

机器学习与深度学习21-信息论

目录 前文回顾1.信息上的概念2.相对熵是什么3.互信息是什么4.条件熵和条件互信息5.最大熵模型6.信息增益与基尼不纯度 前文回顾 上一篇文章链接&#xff1a;地址 1.信息上的概念 信息熵&#xff08;Entropy&#xff09;是信息理论中用于度量随机变量不确定性的概念。它表示了…

chrome138版本及以上el-input的textarea输入问题

描述 项目基于vue2 element UI 问题简述&#xff1a;Chrome138及以上版本&#xff0c;把组件中的el-input的textarea的disabled属性从true设为false&#xff0c;无法输入 封装了一套表单输入组件&#xff0c;其中的textarea如下&#xff1a; <div v-if"item.type te…

TCP/IP 网络编程 | 服务端 客户端的封装

设计模式 文章目录 设计模式一、socket.h 接口&#xff08;interface&#xff09;二、socket.cpp 实现&#xff08;implementation&#xff09;三、server.cpp 使用封装&#xff08;main 函数&#xff09;四、client.cpp 使用封装&#xff08;main 函数&#xff09;五、退出方法…

TASTE-Rob:推进面向任务的手-目标交互视频生成,实现可通用的机器人操作

25年3月来自香港中文大学的论文“TASTE-Rob: Advancing Video Generation of Task-Oriented Hand-Object Interaction for Generalizable Robotic Manipulation”。 本文也是在解决现有数据集和模型在面向任务的手部-目标交互视频生成方面的关键限制&#xff0c;这是为机器人模…

Trae AI IDE 全网最全的使用教程

Trae AI IDE 全网最全的使用教程 近期&#xff0c;字节发布了一款 AI Coding 产品 —— Trae&#xff0c;它是一款对标 Cursor 和 Windsurf 的全新 IDE&#xff0c;也是一款真正为中文开发者量身定制的工具&#xff0c;可谓是中文开发者的福音。 其优雅的 UI、丝滑的交互、母语…

GraspCorrect:通过视觉-语言模型引导反馈进行机器人抓握矫正

25年3月来自韩国 POSTECH 的论文 “GraspCorrect: Robotic Grasp Correction via Vision-Language Model-Guided Feedback”。 尽管机器人操作技术取得了显著进步&#xff0c;但实现一致且稳定的抓取仍然是一项根本挑战&#xff0c;常常限制复杂任务的成功执行。分析表明&…