uniapp如何完美展示页面内容

一、页面布局

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>