uni-app（五）

• view视图容器组件的用法

View视图容器，类似于HTML中的div

 

 

 

 代码案例

<template>
    <!-- view标签相当于div，text标签相当于span -->
    <view>
        <!-- <view>
            <text>学习敲代码看视频</text>
        </view>
        <view>
            <text selectable="true">学习敲代码看视频</text>
        </view>
        <view>
            <text selectable="true" space="ensp">学习    敲代码看视频</text>
        </view>
        <view>
            <text selectable="true" space="emsp">学习    敲代码看视频</text>
        </view>
        <view>
            <text selectable="true" space="nbsp">学习    敲代码看视频</text>
        </view>
        <view>
            <text selectable="true" space="nbsp" style="font-size: 100px">学习    敲代码看视频</text>
        </view> -->
        
        <!-- 点击box的时候会触发box2的属性 产生冒泡 -->
        <view class="box2" hover-class="box2-active">
            <!-- class类名属性 hover-class点击按下去的样式 hover-stop-propagation为阻止冒泡属性 :hover-start-time按下时延迟两秒出现 :hover-stay-time="2000"离开时延迟两秒消失-->
            <view class="box" :hover-start-time="2000" :hover-stay-time="2000" hover-class="box-active" hover-stop-propagation>我是盒子</view>
        </view>
        
    </view>
</template>

<script>
</script>

<style>
    .box{
        width: 100px;
        height: 100px;
        background: #4CD964;
    }
    .box2{
        width: 200px;
        height: 200px;
        background: #aaaaff;
    }
    .box-active{
        background: #007AFF;
    }
    .box2-active{
        background: #ffaaff;
    }
</style>

• button按钮组件的用法

　　

 

 button 组件默认独占一行，设置 size 为 mini 时可以在一行显示多个

具体属性详见官网 https://uniapp.dcloud.io/component/button

按钮代码
<!-- 第一个按钮是默认样式 第二个按钮是小尺寸 第三个按钮是绿色样式 plain按钮是否镂空，背景色透明 disabled禁用 loading等待-->
		<view>
			<button>按钮</button>
			<button size="mini">按钮</button>
			<button type="primary">按钮</button>
			<button type="primary" plain>按钮</button>
			<button type="default" disabled>按钮</button>
			<button type="default" loading>按钮</button>
		</view>

• image组件的使用

 

image组件默认宽度 300px、高度 225px

还有很多其他组件，详见 https://uniapp.dcloud.io/component/  官网