常用的视图容器类组件
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;
}
实现效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/782d857d7d3b7cbd78acc7e41b838088.png)
swiper和swiper-item
轮播图容器组件和轮播图item组件
![](https://i-blog.csdnimg.cn/blog_migrate/f132ae19664957f5ffc725e483b79da4.png)
<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>