uni-app的视图容器组件view、button按钮组件的使用、text组件、image组件

视图容器组件view

1.hover-class属性：实现鼠标摁下去的点击态效果。

<template>
    <view class="container">
        <view class="box1" hover-class="box1_active">
            <text>我是盒子1</text>
        </view>
    </view>
</template>
<style>
    .container {
        height: 100vh;
    }
    .box1 {
        height: 200upx;
        width: 200upx;
        background-color: #2C405A;
    }
    .box1 text {
        color: white;
    }
    .box1_active {
        background-color: #007AFF;
    }
</style>

2.hover-stop-propagation属性：是用来阻止冒泡的。
首先我们来看下实际的冒泡效果（没有设置hover-stop-propagation属性的时候）
我们可以清晰地看到，当我们点击盒子2的hover-class的点击态效果时，盒子1的hover-class的点击态效果也会被同步触发，这就是所谓向上层层冒泡，有时候我们开发中是要阻止这种冒泡的。

测试代码：

<template>
    <view class="container">
        <view class="box1" hover-class="box1_active">
            <text>我是盒子1</text>
            <view class="box2" hover-class="box2_active" hover-stop-propagation>
                <text>我是盒子2</text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
                    
            }
        }
    }
</script>

<style>
    .container {
        height: 100vh;
    }
    /*盒子1的样式*/
    .box1 {
        height: 400upx;
        width: 400upx;
        background-color: #4CD964;
    }
    .box1 text {
        color: white;
    }
    .box1_active {
        background-color: orange;
    }
    
    /*盒子2的样式*/
    .box2 {
        height: 200upx;
        width: 200upx;
        background-color: #ffaa7f;
    }
    .box2 text {
        color: white;
    }
    .box2_active {
        background-color: #ff007f;
    }
</style>

3.hover-start-time属性和hover-stay-time属性都需要通过v-bind绑定使用。
:hover-start-time属性：鼠标摁下后，延迟多少秒才显示hover-class点击态的样式效果。
:hover-stary-time属性：鼠标松开后，这时候的hover-class点击态效果还能继续停留，停留时间的长短和你给的毫秒数有关，然后才恢复原本效果。

效果预览

测试代码：

<template>
    <view class="container">
        <view class="box1" hover-class="box1_active">
            <text>我是盒子1</text>
            <view 
            class="box2" 
            hover-class="box2_active" 
            hover-stop-propagation
            :hover-start-time="2000"
            :hover-stay-time="2000"
            >
                <text>我是盒子2</text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
                    
            }
        }
    }
</script>

<style>
    .container {
        height: 100vh;
    }
    /*盒子1的样式*/
    .box1 {
        height: 400upx;
        width: 400upx;
        background-color: #4CD964;
    }
    .box1 text {
        color: white;
    }
    .box1_active {
        background-color: orange;
    }
    
    /*盒子2的样式*/
    .box2 {
        height: 200upx;
        width: 200upx;
        background-color: #ffaa7f;
    }
    .box2 text {
        color: white;
    }
    .box2_active {
        background-color: #ff007f;
    }
</style>

button按钮组件的使用。

代码：

    <view class="container">
        <button type="default">default 默认是白色按钮</button>
        <button type="warn">warn 警告按钮</button>
        <button type="primary">绿色或者蓝色的按钮</button>
        <button type="primary" disabled>disabled 禁用按钮</button>
        <button type="warn" size="mini">mini 小尺寸按钮</button>
        <button type="primary" plain>plain 镂空按钮 只有边框</button>
        <button type="primary" loading>loading 会转圈圈的按钮</button>
    </view>

注：type="primary"实现的效果在不同端实现的效果也不一样。

text文本组件的使用。

1.selectable属性，光标可选中。

<template>
    <view class="content">
        <view>
            <text>我是文本，是不可选的那种</text>
        </view>
        <view>
            <text selectable>
                我也是文本，但我是可选的那种
            </text>
        </view>
    </view>
</template>

2.space属性，实现连续空格功能，有三个参数，nbsp参数要设置字体尺寸才看出效果

我们以2个空格为例子,参数选择不一样，实现的效果也不一样。

<template>
    <view class="content">
        <view>
            <text space="emsp">我  与春风皆过客</text>
        </view>
        <view>
            <text space="ensp">
                我  与春风皆过客
            </text>
        </view>
        <view>
            <text space="nbsp" style="font-size: 50upx;">
                我  与春风皆过客
            </text>
        </view>
    </view>
</template>

3.decode，这个属性是用来解码的。

支持这几个：  < > & '    

<text decode>
    &nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;
</text>

image组件的使用

mode模式，属性不同，缩放比例也不一样。
常用的2个缩放属性：
aspectFit 保持纵横比缩放图片，可以完整地将图片显示出来。
aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

<view class="container">
    <image src="../../static/test.jpg" mode=""></image>
    <image src="../../static/test.jpg" mode="aspectFit"></image>
    <image src="../../static/test.jpg" mode="aspectFill"></image>
</view>