uni-app 常用基本组件使用

浅浅的花香味﹌ 2021-07-24 19:45 427阅读 0赞

# 一 text组件 #

## 1 代码 ##

<template>
        <view>
            <view>
                <text>唱歌跳舞打篮球</text>
            </view>
            <view>
                <text selectable>唱歌跳舞打篮球</text>
            </view>
            <view>
                <text selectable space="ensp">唱歌    跳舞打篮球</text>
            </view>
            <view>
                <text selectable space="emsp">唱歌    跳舞打篮球</text>
            </view>
            <view>
                <text selectable space="nbsp" style="font-size: 40px;">唱歌    跳舞打篮球</text>
            </view>
            <view>&</view>
        </view>
    </template>
    <script>
    </script>
    <style>
    </style>

## 2 效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

# 二 view组件 #

## 1 代码 ##

<template>
        <view class="box2" hover-class="box-active2">
            
            
            
            
            <view class="box" hover-class="box-active" hover-stop-propagation :hover-start-time="2000" :hover-stay-time="2000">
                我是一个大盒子
            </view>
        </view>
    </template>
    <script>
    </script>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background: green;
        }
        .box-active {
            background: red;
        }
        .box2 {
            width: 220px;
            height: 120px;
            background: blue;
        }
        .box-active2 {
            background: pink;
        }
    </style>

## 2 效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

# 三 button 组件 #

## 1 代码 ##

## 2 效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2][]

# 四 image 组件 #

## 1 代码 ##

<template>
        <view>
            <view class="box2" hover-class="box-active2">
                
                
                
                
                <view class="box" hover-class="box-active" hover-stop-propagation :hover-start-time="2000" :hover-stay-time="2000">
                    我是一个大盒子
                </view>
            </view>
            <button>默认按钮</button>
            <button size="mini">小按钮</button>
            <button type="primary">样式按钮</button>
            <button plain="">镂空按钮</button>
            <button disabled="">禁用按钮</button>
            <button loading>loading按钮</button>
            <image src="../../static/tabs/1237644.png"></image>
            
            
            <image src="../../static/tabs/1237644.png" mode="aspectFit"></image>
            <image src="../../static/tabs/1237644.png" mode="aspectFill"></image>
        </view>
    </template>
    <script>
    </script>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background: green;
        }
    
    
        .box-active {
            background: red;
        }
    
    
        .box2 {
            width: 220px;
            height: 120px;
            background: blue;
        }
    
    
        .box-active2 {
            background: pink;
        }
    </style>

## 2 效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/aeaf59c88017491dbf87ab433ae35f52.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/8b69bf4302b14c14a83ac0fb77b39d24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2]: /images/20210724/51e4bbae31d04a6caacd071256775cc9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 3]: /images/20210724/e2686fa7652e4dd487c060a9bd61f1cd.png