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

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

一、安装扩展插件

安装方法：

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

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

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

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

等待安装完成即可。 

二、使用扩展插件

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

主要属性有：

LoadMore Props

属性名	类型	可选值	默认值	说明
iconSize	Number	-	24	指定图标大小
status	String	more/loading/noMore	more	loading 的状态
showIcon	Boolean	-	true	是否显示 loading 图标
showText	Boolean	-	true	**[1.3.3新增]**是否显示文本
iconType	String	snow/circle/auto	auto	指定图标样式
color	String	-	#777777	图标和文字颜色
contentText	Object	-	{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中调整加载速度。