一、页面布局
uniapp提供了许多组件和布局方式，以满足开发者对页面布局的需求，如：flev布局、grid布局、水平垂直居中等。其中，flex布局最常用，可以在父元素上使用flex布局属性，来控制子元素的布局方式。
以下是一个例子，演示了如何使用flex布局展示列表。
<template>
<view class="flex-container">
<view v-for="(item, index) in list" class="flex-item">
<img :src="item.img">
<view>{{item.title}}</view>
<view>{{item.desc}}</view>
</view>
</view>
</template>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex-item {
width: calc(33.33% - 10px);
margin-bottom: 20px;
}
</style>
<script>
export default {
data() {
return {
list: [
{
img: "https://dummyimage.com/100x100/000/fff",
title: "标题1",
desc: "描述1"
},
{
img: "https://dummyimage.com/100x100/000/fff",
title: "标题2",
desc: "描述2"
},
{
img: "https://dummyimage.com/100x100/000/fff",
title: "标题3",
desc: "描述3"
}
]
};
}
};
</script>
二、颜色选择
在uniapp中，可以使用原生的颜色名，也可以使用16进制表示的颜色值。同时，也支持rgba颜色和渐变色。下面是例子展示：
<template>
<view style="background: purple; color: white; padding: 10px;">
紫色背景，白色字体
</view>
<view style="background: #666666; color: #ffffff; padding: 10px;">
灰色背景，白色字体
</view>
<view style="background: rgba(0,0,0,0.7); color: #ffffff; padding: 10px;">
半透明背景，白色字体
</view>
<view style="background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); height: 100px;"></view>
</template>
三、字体与字号
uniapp支持多种字体，可以在字体样式上设置font-family属性，比如设置字体为微软雅黑。同时，也可以设置字体大小，一般在字体样式上设置font-size属性。
<template> <view style="font-size: 20px;">默认字体大小20px</view> <view style="font-size: 30px; font-family: simsun;">宋体字体大小30px</view> <view style="font-size: 40px; font-family: Microsoft YaHei;">微软雅黑字体大小40px</view> </template>
四、动画效果
uniapp内置了许多动画效果，可以在不同的场景下应用。下面是一个例子，使用bounceInLeft动画效果展示图片。
<template>
<view class="bounceInLeft" @click="showImg = !showImg">
<img v-if="showImg" src="https://dummyimage.com/400x400/000/fff">
</view>
</template>
<style scoped>
.bounceInLeft {
animation: bounceInLeft 1s forwards;
}
@keyframes bounceInLeft {
0% {
transform: translateX(-100%);
opacity: 0;
}
60% {
transform: translateX(30%);
opacity: 1;
}
80% {
transform: translateX(-10%);
opacity: 0.8;
}
100% {
transform: translateX(0%);
opacity: 1;
}
}
</style>
<script>
export default {
data() {
return {
showImg: false
};
}
};
</script>
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/257935.html
微信扫一扫 
支付宝扫一扫 