【Uni-App社区小程序】009-view和text组件以及动画使用
【Uni-App社区小程序】009-view和text组件以及动画使用
訾博ZiBo
发布于 2025-01-06 15:21:47
发布于 2025-01-06 15:21:47
代码可运行
运行总次数：0
代码可运行
最后更新：2020年11月6日20点37分
Vue.js学习笔记：
https://blog.csdn.net/qq_29689343/category_10289311.html
一、View
1、新建demo页面
我们来新建一个demo页面，并将其放在第一个，作为启动页，专门用来进行学习；
2、View组件
官方文档地址：
https://uniapp.dcloud.net.cn/component/view
截图：
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>截图：
备注：
结合CSS和属性进行相关设置即可；
二、Text组件
1、text组件
官方文档地址：
https://uniapp.dcloud.net.cn/component/text
截图：
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>截图：
备注：
结合文档进行设置即可，过于简单，不做具体演示；
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
