uniapp-笔记【二】 uniapp组件的使用[text][view][button][image]

组件

组件相关官方文档

text 文本组件

<template>
	<view>
		<!-- 为了换行-一人一个view -->
		<view>
			<text>不可选text</text>
		</view>
		<view>
			<text selectable="true">可选的text</text>
		</view>
		<view>
			<text space="emsp">这样就能      解析多个连续的空格了否则只解析一个		       </text>
		</view>
		<view>
			<text decode="false">是否对字符进$nbsp行解码</text>
		</view>
	</view> 
</template>

空格相关

view 容器组件

其实他就相当于<div>,容器组件；

属性：

view 组件示例代码

<template>
	<view>
		<!-- 常规状态使用class样式，按下时使用hover-class指向的样式 释放后恢复-->
		<!-- 
		hover-start-time="2000" 按下多少毫秒后触发样式切换 
		hover-stay-time="2000" 松开多少毫秒后恢复原来样式
		-->
		<view class="box" hover-class="box-hover" hover-start-time="2000" hover-stay-time="2000">
			大盒子
			<!-- 当套娃时,最近原则，内部遵循小盒子的属性，但是点击特效，外部的会受内部的触发[内部不会受外部触发]，
			可以使用  hover-stop-propagation 加在内部标签，阻止冒泡效应传递，将只会触发自己的事件-->
			<view class="box2" hover-class="box2-hover" hover-stop-propagation>小盒子</view>
		</view>
		
	</view>
</template>
<style>
	.box{
		width: 200px;
		height: 200px;
		background: #00aaff;
		color: #ffffff;
	},
	.box-hover{
		width: 205px;
		height: 205px;
		background: #007AFF;
		color: #ffffff;
	},
	.box2{
		width: 100px;
		height: 100px;
		background: #007AFF;
		color: #ffffff;
	},
	.box2-hover{
		width: 50px;
		height: 50px;
		background: #55ffff;
	}

</style>

button 按钮组件

属性

button的属性

示例代码：

	<view class="main">
		<view >
		<button>一坨按钮</button>
		<button size="mini">mini大小按钮</button>
		<button size="default">默认大小按钮</button>
		<button size="mini" type="primary">primary样式按钮</button> <!-- 不同浏览器不一样 -->
		<button size="mini" type="default">default样式按钮</button>
		<button size="mini" type="warn">warn按钮</button>
		<button size="mini" :plain="true">按钮是否镂空[默认false]</button>
		<button size="mini" :disabled="true">被禁用的按钮</button>
		<button size="mini" :loading="true">带loading图标的按钮,true为出现</button>
		</view>
	</view>

效果

image 图片组件

图片组件属性

示例代码

	<view class="main">
		<view >
			<!--
			 src 图片路径，可以是本地也可以是线上的,mode属性配置图片的压缩裁剪策略，详情见官方文档
			 -->
		<image src="https://img1.baidu.com/it/u=3272449815,2870615706&fm=26&fmt=auto"
		 mode="aspectFit"><!-- 保证长边完全显示 太宽时缩小图片 -->
		 <image src="https://img1.baidu.com/it/u=3272449815,2870615706&fm=26&fmt=auto"
		  mode="aspectFill"><!--保证短边完全显示 太长时缩小图片-->
		</view>
	</view>

效果