小程序学习-2

一、视图容器

1、打横滑动、打竖滑动

<!-- scroll-x 打横滑动 -->
<!-- scroll-y 打竖滑动 -->
<scroll-view class="container1" scroll-y>
    <view>A</view>
    <view>B</view>
    <view>C</view>
</scroll-view>

.container1 view{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    /* 打横滑动需要 */
    /* display: inline-block; */
}

.container1 view:nth-child(1) {
    background-color: blue;
}
.container1 view:nth-child(2) {
    background-color: blueviolet;
}
.container1 view:nth-child(3) {
    background-color: cyan;
}

/* 打横滑动 */
/* .container1 {
    border: 1px solid red;
    white-space: nowrap;
    width: 120px;
    height: 100px; 
} */
.container1 {
    border: 1px solid red;
    white-space: nowrap;
    width: 100px;
    /* 强制高度 */
    height: 120px; 
}

2、轮播图

<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="gray" autoplay interval="2000" circular>
    <!-- 三个轮播图 -->
    <swiper-item>
        <view class="item">a</view>
    </swiper-item>
    <swiper-item>
        <view class="item">b</view>
    </swiper-item>
    <swiper-item>
        <view class="item">c</view>
    </swiper-item>
    <swiper-item>
        <image src="/images/1.jpg"></image>
    </swiper-item>
</swiper>

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

二、text组件

三、按钮

1、mode属性