uni-app 基础之常用组件（1）视图容器

一、最常用的view视图容器

1.template

 2.样式 style

<style>
    .view {
        display: flex;
        flex-direction: row;
    }
    .view1 {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100rpx;
        height: 100rpx;
        background-color: #007AFF;
        margin: 5rpx;
    }
    .view2 {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100rpx;
        height: 100rpx;
        background-color: #ff557f;
        margin: 5rpx;
    }
    .view3 {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100rpx;
        height: 100rpx;
        background-color: #55aa00;
        margin: 5rpx;
    }
</style>

3.效果

 二、scroll-view 可滚动视图

<template>
    <!-- scroll-view 容器实现可滚动区域 主要是 ：scroll-x 与scroll-y属性  -->
    <view class="content">
        <scroll-view style="height: 150rpx;"