微信小程序03 组件（视图容器view 、scroll-view、swiper属性及实现轮播图效果 ）

一、常用的视图容器组件

（一） view

view组件是一个普通的视图区域，相当于Html中的div，是块级元素。
基本使用：

1.实现flex横向布局效果
首先，在页面的wxml文件里写如下内容：

<text>我是page1text>
<view class="c1">
    <view>Aview>
    <view>Bview>
    <view>Cview>
view>

此时页面上会出现下图结果，因为view组件是块级元素，所以每一个元素占一行。

再在wxss文件里给view组件写样式，定义组件的行高和背景颜色

/* pages/page1/page1.wxss */
.c1 view{
    width:100px;
    height:100px;
    line-height: 100px;
    text-align: center;
}
.c1 view:nth-child(1){
    background-color: aquamarine;
}
.c1 view:nth-child(2){
    background-color: gold;
}
.c1 view:nth-child(3){
    background-color: pink;
}

显示效果如下图：

最后设置子元素的空间分配
（在wxss中）

.c1{
    display: flex;
    justify-content: space-around;
}

最终效果如下图：

注：display：flex 是父元素的属性，用来设置盒模型对象的子元素的空间分配。

（二） scroll-view

可滚动的视图区域，常用来实现滚动列表效果

同样：
wxml代码：

<scroll-view class="c1" scroll-y>
    <view>Aview>
    <view>Bview>
    <view>Cview>
scroll-view>

wxss代码：
其他样式都不用变，只需要给父元素限定高度即可。

.c1{
    border:1px solid red;
    width:100px;
    height:120px;
}

最终效果如下：
滑动时右边会出现滚动条：

（三） swiper 和swiper-item

轮播图容器组件和轮播图item组件
wxml代码：

<swiper class="swiper-container">
    
    <swiper-item>
        <view class="item">Aview>
    swiper-item>
    
    <swiper-item>
        <view class="item">Bview>
    swiper-item>
    
    <swiper-item>
        <view class="item">Cview>
    swiper-item>
swiper>

wxss代码：

.swiper-container{
    height:150px;
}
.item{
    height: 100%;
    text-align: center;
    line-height: 150px;
}
swiper-item:nth-child(1) .item{
    background-color: skyblue;
}
swiper-item:nth-child(2) .item{
    background-color: aquamarine;
}
swiper-item:nth-child(3) .item{
    background-color: darksalmon;
}

最终效果如下：
三张item可以进行轮播展示

swiper组件的属性：

可以参考微信小程序的官方文档，比如第一个属性indicator-dots 直接在wxml里进行设置 直接在后面添加属性名即可

<swiper class="swiper-container" indicator-dots>

效果如下：