目录
小程序中的组件是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。
一、视图容器组件
1.普通视图组件view
类似于 HTML 中的 div,是一个块级元素。常用来实现页面的布局效果。
.wxml中:
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>
.wxss中:
.container1 view {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1) {
background-color: lightgreen;
}
.container1 view:nth-child(2) {
background-color: lightskyblue;
}
.container1 view:nth-child(3) {
background-color: lightcoral;
}
.container1 {
display: flex;
justify-content: space-around;
}
效果如图:
2.滚动视图组件scroll-view
常用来实现滚动列表效果。
scroll-y属性:允许纵向滚动
scroll-x属性:允许横向滚动
.wxml中:
<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
.wxss中:
.container1 {
border: 1px solid red;
/*给scroll-view固定高度*/
height: 120px;
width: 100px;
}
效果如图:
3.滑动视图容器swiper 和 swiper-item
.wxml中: