Uniapp零基础开发学习笔记(6) -基础内容组件icon/text/富文本/进度条的练习使用

基础组件中，有一些基础内容的组件比如图标,文本之类其实用法还是比较多的，耐心一点对着官方教程学习一下可以补漏很多知识。同时表单组件的使用也一起学习，对每个表单的组件做一次深入了解。

1.基础内容组件的介绍

基础内容组件主要是图标，文本，富文本和进度条，这些都是日常用的比较多的基础组件。
在这里插入图片描述

2.基础内容组件的练习使用

1. icon 图标
由于 icon 组件各端表现存在差异，可以通过使用 字体图标 的方式来弥补各端差异。用字体显示图标，总体过程还是比较复杂的，但是官网上讲的不太清楚。
我找了一下网上的相关介绍，决定先用系统自带的字体文件uni.ttf，因此先做一下准备工作，从示例代码hello uniapp中把uni.ttf复制到现在工程的static目录下面。(当然也许用不着)
在这里插入图片描述
icon组件的属性和值
在这里插入图片描述
icon组件的type属性，即icon类型，不同平台的支持是不一样的。需要根据平台选择或者预编译。
在这里插入图片描述
完成效果如下，不知道为什么只有[‘success’, ‘success_no_circle’, ‘warn’, ‘waiting’, ‘cancel’]而
[ ‘info’, ‘download’, ‘search’,‘clear’]图标显示不了，不知道为什么。
color属性可以设置颜色,比如下面改为蓝色blue

 <icon :type="value" size="26" color="blue"/>

在这里插入图片描述
用一个数组循环输出这些图标，参考样例的-vfor循环，代码如下：

	<view class="item" v-for="(value,index) in iconType" :key="index">
		    <icon :type="value" size="26"/>
		    <text>{{value}}</text>
	</view>

在脚本中定义iconType数组的初始值，在onLoad()事件中,根据平台设置图标数组的名称。这个需要关注官网描述的各个平台支持icon类型名称。

<script>
	export default {
		data() {
			return {
		title: '我的',
		iconType:['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search','clear']
			}
		},
		onLoad() {
		// #ifdef APP-PLUS|| MP-WEIXIN
		this.iconType = ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search','clear']
		// #endif
		// #ifdef MP-ALIPAY
		this.iconType = ['info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear', 'success', 'success_no_circle', 'loading']
		// #endif
		// #ifdef MP-BAIDU
		this.iconType = ['success', 'info', 'warn', 'waiting', 'success_no_circle', 'clear', 'search', 'personal', 'setting', 'top', 'close', 'cancel', 'download', 'checkboxSelected', 'radioSelected', 'radioUnselect']
		// #endif
		},
		methods: {
			}
	}
</script>

2. text 文本
文本组件text用于包裹文本内容。
text属性主要有selectable是否可选默认false，以及user-select(微信小程序)只是平台差异；
space有ensp，emsp，nbsp三个值主要是设置空格大小，这个可以实际看效果理解差异；
decode是否解码默认false，可以解析的有 &nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;
支持 \n 方式换行。
在这里插入图片描述
这是案例的显示效果：
按钮add line点击后增加一行显示
按钮remove line点击后减少一行显示
在这里插入图片描述
模板内部的引用组件代码如下:

<view class="uni-padding-wrap uni-common-mt">
	<!-- 使用text-box组件，定义竖直方向可以滚动 -->
	<view class="text-box" scroll-y="true">
		<text>{{text}}</text>
	</view>
	<!-- 增加两个button操作 -->
	<view class="uni-btn-v">
		<button type="primary" :disabled="!canAdd" @click="add">add line</button>
		<button type="warn" :disabled="!canRemove" @click="remove">remove line</button>
	</view>
</view>

两个按钮的属性disabled用了变量定义，并且定义了click事件。
在脚本中，增加text引用的数组，以及定义click之后产生的add，以及remove函数内容。

texts: [
        'HBuilder，500万开发者选择的IDE',
        'MUI，轻巧、漂亮的前端开源框架',
        'wap2app，M站快速转换原生体验的App',
        '5+Runtime，为HTML5插上原生的翅膀',
        'HBuilderX，轻巧、极速，极客编辑器',
        'uni-app，终极跨平台方案',
        'HBuilder，500万开发者选择的IDE',
        'MUI，轻巧、漂亮的前端开源框架',
        'wap2app，M站快速转换原生体验的App',
        '5+Runtime，为HTML5插上原生的翅膀',
        'HBuilderX，轻巧、极速，极客编辑器',
        'uni-app，终极跨平台方案',
        '......'
],
text: '',
canAdd: true,//disabled引用变量
canRemove: false,//disabled引用变量
extraLine: []

在methode之内定义以下两个函数add，以及remove，在函数中设计了增加或者减少一行字符串的方法，初始字符串数组在texts定义，当前显示字符串数组为extraLine,用extraLine长度判断是否可以增减canAdd，canRemove

add: function(e) {
                //每次add向extraLine数组推入一个texts数组中的字符串，索引是extraLine数组长度% 12，
                //也就是循环推入每12个从头开始，设计比较巧妙
				this.extraLine.push(this.texts[this.extraLine.length % 12]);
				this.text = this.extraLine.join('\n');//增加换行符
				this.canAdd = this.extraLine.length < 12;//最多显示12行
				this.canRemove = this.extraLine.length > 0;//0行时就不能删除了
			        },
remove: function(e) {
        //只要显示数组长度>0就可以推出1个字符串
		if (this.extraLine.length > 0) {
			this.extraLine.pop();
			this.text = this.extraLine.join('\n');//增加换行符
			this.canAdd = this.extraLine.length < 12;//最多显示12行
			this.canRemove = this.extraLine.length > 0;//0行时就不能删除了
		   }
	                }

3.rich-text富文本
富文本支持默认事件，包括：click、touchstart、touchmove、touchcancel、touchend、longpress。
在这里插入图片描述
nodes 值为 HTML String 时，在组件内部将自动解析为节点列表，推荐直接使用 Array 类型避免内部转换导致的性能下降。App-nvue 和支付宝小程序不支持 HTML String 方式，仅支持直接使用节点列表即 Array 类型，如要使用 HTML String，则需自己将 HTML String 转化为 nodes 数组，可使用 html-parser (opens new window)转换。
节点列表内的节点现支持两种类型，通过 type 来区分，分别是元素节点和文本节点，默认是元素节点
在这里插入图片描述
富文本使用<rich-text>标签定义，属性nodes可定义两种类型，一种为nodes数组，一种为文本字符串，
但两种都可以解析为富文本。
显示效果
在这里插入图片描述
案例模板代码：
nodes分别通过变量数组nodes和strings定义

<!-- 富文本的使用案例 nodes="nodes"-->
<view class="uni-common-mt" style="background:#FFF; padding:20rpx;">
	<rich-text :nodes="nodes"></rich-text>
</view>
<!-- 富文本的使用案例 nodes="strings"-->
<view class="uni-common-mt" style="background:#FFF; padding:20rpx;">
	<rich-text :nodes="strings"></rich-text>
</view>

脚本中定义：

//nodes对应一个html的节点解析的数组
nodes: [{
		name: 'div',
		attrs: {
			class: 'div-class',
			style: 'line-height: 60px; color: red;text-align:center;'
		},
		children: [{
			type: 'text',
			text: 'Hello&nbsp;uni-app!'
		}]
		}],
//strings对应一个html的节点解析的字符串
strings: '<div style="text-align:center;"><img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png"/></div>'

以nodes数组为例，示例中定义了div父节点，属于’div-class’，对应的属性就可以按照div标签的属性进行设置
比如：
font-style:italic设置为斜体； text-decoration:line-through增加删除线等等

name: 'div',
		attrs: {
			class: 'div-class',
			style: 'line-height: 60px; color: red;text-align:center; font-style:italic ; text-decoration:line-through'
		},

具体可以在网上查看html关于节点的定义方法：百度DIV标签
文本字符串则更加直白，理解了则跟nodes区别不大。
4.progress进度条
进度条progress用法比较简单，比较重要的属性如下:
percent:获取或者设置百分比，值从0-100
show-info：是否在右侧显示百分比，默认false
stroke-width：进度条线宽默认6px
activeColor：已选择的进度条的颜色
backgroundColor：未选择的进度条的颜色
在这里插入图片描述
示例方案显示效果：
在这里插入图片描述
下方为案例示例代码：

<!-- 进度条的使用案例 -->
<view class="uni-padding-wrap uni-common-mt">
	<view class="progress-box">
		<!-- show-info显示右侧百分比 -->
		<progress :percent="pgList[0]" show-info stroke-width="3" />
	</view>
	<view class="progress-box">
		<!-- 追加图标 -->
		<progress :percent="pgList[1]" stroke-width="3" />
		<uni-icons type="close" class="progress-cancel" color="#dd524d"></uni-icons>
	</view>
	<view class="progress-box">
		<progress :percent="pgList[2]" show-info="true" stroke-width="3" />
	</view>
	<view class="progress-box">
		<!-- 设置进度条已完成颜色为红色 -->
		<progress :percent="pgList[3]" activeColor="#ff0000" stroke-width="3" />
	</view>
	<view class="progress-control">
		<button type="primary" @click="setProgress">设置进度</button>
		<button type="warn" @click="clearProgress">清除进度</button>
	</view>
</view>
<!-- 进度条的使用案例结束 -->

四个进度条percent用了变量数组pgList定义,以及按钮设置了两个事件设置和清除进度setProgress和clearProgress
这些在脚本中进行定义

<script>
export default {
		data() {
			return {
				pgList: [0, 0, 0, 0]
			}
		},
		methods: {
			setProgress() {
				this.pgList = [20, 40, 60, 80]
			},
			clearProgress() {
				this.pgList = [0, 0, 0, 0]
			}
		}
	}
</script>

CSS样式设置4个进度条的布局方式，高度，边界距离以及图标的高度

<style>
	.progress-box {
		display: flex;
		height: 50rpx;
		margin-bottom: 60rpx;
	}
	.uni-icon {
		line-height: 1.5;
	}
	.progress-cancel {
		margin-left: 40rpx;
	}
	.progress-control button {
		margin-top: 20rpx;
	}
</style>
# uni-app # 学习 # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

通过HPA+CronHPA组合应对业务复杂弹性伸缩场景

avatar 华为云开发者联盟
cover

FT-FMEA融合混沌演练，零售运营系统韧性架构在线验证实践

avatar 华为云开发者联盟
cover

如何使用Python和Plotly绘制3D图形

avatar 华为云开发者联盟