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>