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

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.xdnf.cn/news/945127.html

相关文章:

  • A2A JS SDK 完整教程:快速入门指南
  • Linux线程互斥与竞态条件解析
  • LeetCode Hot100刷题——三数之和
  • 2025企业级采购系统深度评测:AI技术如何助力采购成本直降40%?
  • Python训练营-Day26-函数专题1:函数定义与参数
  • 从实验室到产业:IndexTTS 在六大核心场景的落地实践
  • 影子栈指针是什么?
  • 原型模式深度解析:Java设计模式实战指南与克隆机制优化实践
  • 一种使用 PowerToys 的键盘管理器工具重新映射按键实现在 Windows 上快捷输入字符的方式
  • 在Spring Boot中集成RabbitMQ的完整指南
  • vue3+vite+pnpm项目 使用monaco-editor常见问题
  • 数据结构篇--分离链表vs线性探测
  • Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?
  • laravel8+vue3.0+element-plus搭建方法
  • Hugging Face、魔塔社区(MOTA)与OpenRouter:AI模型平台深度对比与实战指南
  • (七) 深度学习进阶:现代卷积神经网络技术解析与应用实践
  • <STC32G12K128入门第十九步>QT串口ISP更新上位机
  • Spring 框架(1)
  • 题山采玉:Day3
  • 3D Web轻量化引擎HOOPS Communicator赋能一线场景,支持本地化与动态展示?
  • 如何手撸一个最小化操作系统:从 0 到 1 掌握汇编-文件管理-内存页表-文件系统-上下文切换算法 MIT 经典教程 结合豆包ai
  • 如何控制electron的应用在指定的分屏上打开[特殊字符]
  • 计算机技术、互联网与 IT 前沿:量子计算、Web3.0 等趋势洞察及行业应用
  • 第21节 Node.js 多进程
  • WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)
  • GraphQL 实战篇:Apollo Client 配置与缓存
  • 技能伤害继承英雄属性【War3地图编辑器】进阶
  • 数据结构 - 栈与队列
  • 【Proteus仿真】【32单片机-A010】步进电机控制系统设计
  • “冒个泡泡”,排个序呗~:C语言版冒泡排序全解