小程序常用组件小结

常用的视图容器类组件

view

类似与HTML中的div,是一个块级元素
常用来实现页面的布局效果
普通视图区域

scroll-view

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

<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>

.container1 {
    /* display: flex;
    justify-content: space-around; */
    border: 1px solid #ccc;
    width: 100px;
    height: 120px;
}
.container1 view {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
.container1 view:nth-child(1) {
    background-color: lightgreen;
}
.container1 view:nth-child(2) {
    background-color: blue;
}
.container1 view:nth-child(3) {
    background-color: pink;
}

实现效果如下:

swiper和swiper-item

轮播图容器组件和轮播图item组件

<swiper class="swiper_container" indicator-dots indicator-color="#fff" indicator-active-color="gray" autoplay="true" 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>