uni-app笔记 view组件 button按钮 image组件

1、view组件

view相当于html中的div 独占一行 (view在为空时不会独占一行)

			<view class="box" hover-class="box-active">
				<!--可以通过hover-class点击切换类名-->
			</view>
		
			
			<view class="box2" hover-class="box2-active" >
				<!--由于事件冒泡 点击里面的view 外面的view事件也会被触发-->
				<view class="box" hover-class="box-active" hover-stop-propagation>
				<!--给内部的盒子追加hover-stop-propagation阻止冒泡-->
				</view>
			</view>

			<view class="box" hover-class="box-active" :hover-start-time="2000">
				<!--按住多久后触发效果 延迟触发 毫秒数要写表达式 因此需要:bind-->
			</view>

2、button按钮

可以使用uni自带的一些样式 以及属性 比如禁止选中等

	
			<button type="primary">按钮</button>
			<!-- 和boostarap一样 有默认样式type -->
			<button size="mini">按钮</button>
			<!-- size设置大小 -->
			<button size="mini" plain>按钮</button>
			<!-- 是否镂空 -->
			<button size="mini" disabled="true">按钮</button> 
			<!-- 禁用的按钮 -->
			<button size="mini" loading="true">按钮</button> 
			<!-- 使用loading会在按钮中显示一个加载转圈动画 -->

3、image组件

uni-app中图片需要写全称<image> 不可写为img

uni-app中图片会有默认大小

		<image src="../../static/img/category/1.jpg" mode="aspectFill"></image>
		<!-- 只保持长边比例   会有一部分被截掉 -->
		<image src="../../static/img/category/1.jpg" mode="aspectFit"></image>
		<!-- 保持纵横比例 让图片可以完整显示出来 -->