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;” scroll-y=””>
            <view class=”view1″>001</view>
            <view class=”view1″>002</view>
            <view class=”view1″>003</view>
        </scroll-view>

        <scroll-view class=”scrollX” scroll-x=””>
            <view class=”view2″>001</view>
            <view class=”view2″>002</view>
            <view class=”view2″>003</view>
            <view class=”view2″>004</view>
            <view class=”view2″>005</view>
            <view class=”view2″>006</view>
            <view class=”view2″>003</view>
        </scroll-view>
    </view>
</template>

<style>
    view {
        margin: 5rpx;
    }

    .view1 {
        width: 300rpx;
        height: 100rpx;
        background-color: #007AFF;
        margin: 5rpx;
    }

    .view2 {
        /* 设置view容器为 行内块元素 */
        display: inline-block;
        width: 200rpx;
        height: 100rpx;
        background-color: #ff5500;
        margin: 5rpx;
    }

    .scrollX {
        /* 设置scroll-view容器为 宽度为100% */
        width: 100%;
        /* 设置scroll-view容器内元素不换行，这样才能实现横向滑动 */
        white-space: nowrap;
    }
</style>
效果图：

三、swiper滑块视图（即广告Banner页）

滑块的图片现用的是本地图片

<template>
    <view>
        <swiper indicator-dots=”true” autoplay=”true” interval=”2000″>
            <swiper-item class=”swiperitem”>
                <image class=”swiperImg” src=”../../../static/one.jpg“></image>
            </swiper-item>
            <swiper-item>
                <image class=”swiperImg” src=”../../../static/two.jpg”></image>
            </swiper-item>
            <swiper-item>
                <image class=”swiperImg” src=”../../../static/three.jpg”></image>
            </swiper-item>
        </swiper>

        <view>
            <view>重要属性：</view>
            <view style=”font-style: italic;”>1.indicator-dots 是否显示面板指示点 false</view>
            <view style=”font-style: italic;”>2.vertical 滑块方向是否为纵向 false</view>
            <view style=”font-style: italic;”>3.autoplay 是否自动切换 false</view>
            <view style=”font-style: italic;”>4.interval 自动切换时间间隔 毫秒</view>
            <view style=”font-style: italic;”>5.duration 滑动动画时长 毫秒</view>
            <view style=”font-style: italic;”>6.height 调整默认高度</view>
        </view>
    </view>
</template>

<style>
    swiper {
        background-color: #ffffff;
    }
    .swiperImg {
        width: 100%;
        margin-left: 15rpx;
        margin-right: 15rpx;
    }

</style>

效果图：

 四、icon图标

<template>
    <view>
        <view>
            <icon type=”success”>成功图标</icon>
            <icon type=”success_no_circle”>成功图标</icon>
            <icon type=”info”>提醒图标</icon>
            <icon type=”warn”>警告图标</icon>
            <icon type=”waiting”>等待图标</icon>
            <icon type=”cancel”>取消图标</icon>
            <icon type=”download”>下载图标</icon>
            <icon type=”search”>查询或搜索图标</icon>
            <icon type=”clear”>清空图标</icon>
        </view>
        <!– 改变图标的大小 –>
        <view>
            <icon type=”success”></icon>
            <icon type=”success” size=”10px”></icon>
            <icon type=”success” size=”20px”></icon>
            <icon type=”success” size=”30px”></icon>
        </view>
        <!– 改变图标大小与颜色 –>
        <view>
            <icon type=”success”></icon>
            <icon type=”success” size=”10px” color=”red”></icon>
            <icon type=”success” size=”20px” color=”green”></icon>
            <icon type=”success” size=”30px” color=”yellow”></icon>
        </view>
    </view>
</template>

效果图：

最后是交流公众号，大家可以关注一下