【Uni-App社区小程序】009-view和text组件以及动画使用

清疚 2023-10-06 13:29 15阅读 0赞

> ### 最后更新：2020年11月6日20点37分 ###

# **目录** #

一、View

1、新建demo页面

2、View组件

官方文档地址：

截图：

3、使用

代码：

截图：

备注：

二、Text组件

1、text组件

官方文档地址：

截图：

2、使用

代码：

截图：

备注：

--------------------

Vue.js学习笔记：

[https://blog.csdn.net/qq\_29689343/category\_10289311.html][https_blog.csdn.net_qq_29689343_category_10289311.html]

# 一、View #

## 1、新建demo页面 ##

我们来新建一个demo页面，并将其放在第一个，作为启动页，专门用来进行学习；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

## 2、View组件 ##

### 官方文档地址： ###

[https://uniapp.dcloud.net.cn/component/view][https_uniapp.dcloud.net.cn_component_view]

### 截图： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

## 3、使用 ##

### 代码： ###

<template>
    	<view>
    		<view class="v1" hover-class="v1-uni" hover-stay-time="100">第一个view</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				
    			}
    		},
    		methods: {
    			
    		}
    	}
    </script>
    
    <style>
    	.v1{
    		width: 200upx;
    		height: 200upx;
    		background: #09BB07;
    		color: #2C405A;
    		margin: 100upx;
    	}
    	.v1-uni{
    		background: #FF0000;
    	}
    </style>

### 截图： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2][]

### 备注： ###

结合CSS和属性进行相关设置即可；

# 二、Text组件 #

## 1、text组件 ##

### 官方文档地址： ###

[https://uniapp.dcloud.net.cn/component/text][https_uniapp.dcloud.net.cn_component_text]

### 截图： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3][]

## 2、使用 ##

### 代码： ###

<template>
    	<view>
    		<text class="t1" selectable="true">这是text文本组件</text>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				
    			}
    		},
    		methods: {
    			
    		}
    	}
    </script>
    
    <style>
    	.t1{
    		width: 200upx;
    		height: 200upx;
    		background: #09BB07;
    		color: #2C405A;
    		margin: 100upx;
    	}
    </style>

### 截图： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4][]

### 备注： ###

结合文档进行设置即可，过于简单，不做具体演示；

[https_blog.csdn.net_qq_29689343_category_10289311.html]: https://blog.csdn.net/qq_29689343/category_10289311.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200722222440456.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[https_uniapp.dcloud.net.cn_component_view]: https://uniapp.dcloud.net.cn/component/view
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200722222755749.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200722223942293.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[https_uniapp.dcloud.net.cn_component_text]: https://uniapp.dcloud.net.cn/component/text
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200722224439584.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200722224941383.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70