小程序组件的分类
视图容器
1.view的具体运用
下面展示具体代码
// 在list.wxml中
// <!--pages/list/list.wxml-->
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
<view>
// 在list.wxss中
// /* pages/list/list.wxss */
.container1 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container1 :nth-child(1){
background-color: lightblue;
}
.container1 :nth-child(2){
background-color: lightgreen;
}
.container1 :nth-child(3){
background-color: lightpink;
}
.container1{
display: flex;
justify-content: space-around;
}
如何理解flex。1
如何理解justify-content。2
2.scroll-view的具体运用
下面展示具体代码
// 在list.wxml中
//1 <!-- scroll-y属性：允许纵向滚动-->
2 <!-- scroll-x属性：允许横向滚动 ->
3 <!--注意：使用竖向滚动时，必须给 scroll-view一个固定高度-->
// <!--pages/list/list.wxml-->
<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
// 在list.wxss中
// /* pages/list/list.wxss */
.container1 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container1 :nth-child(1){
background-color: lightblue;
}
.container1 :nth-child(2){
background-color: lightgreen;
}
.container1 :nth-child(3){
background-color: lightpink;
}
.container1{
border: 1px solid red;
width: 100px;
height: 120px;
}
3.swiper与swiper-item的具体运用
下面展示代码
// 在list.wxml中
// <!--pages/list2/list2.wxml-->
<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="yellow"
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>
swiper组件常用的属性。3
// 在list.wxss中
// /* pages/list2/list2.wxss */
.swiper-container{
height: 150px;
}
.item{
height: 100%;
line-height: 150px;
text-align: center;
}
/* :nth-child()空格.item */
swiper-item:nth-child(1) .item{
background-color: lightpink;
}
swiper-item:nth-child(2) .item{
background-color:lime;
}
swiper-item:nth-child(3) .item{
background-color: lightyellow;
}
4.其它
如：movable-view
cover-view
CSS布局方案基于盒子模型，依赖display、position、float的传统布局解决方案。但是盒子模型也有它的不足之处，如我们需要元素垂直局中布局的时候或者设计元素根据屏幕形式自动伸缩的响应式页面的时候，仅仅依靠盒子模型布局方式就很难实现了。
为了解决这个问题，Flex布局方案出现了，它可以简单地实现各种响应式布局，很快就成为了CSS布局的首选方案，如微信小程序的Demo就是基于Flex布局方案实现的。
Flex是Flexible Box的缩写，意即弹性布局，也被称为柔性布局，它能让子项目方便地改变宽度、高度和顺序，为盒子模型提供最大的布局灵活性。
Flex布局的元素，其大小是可伸缩的，可以根据需要扩展自己的尺寸来填满可用空间，或缩小它们，避免溢出容器。
在常规的盒子模型布局中方向是确定的，块就是从上到下，内联就从左到右，而在Flex布局中，方向是不可预知的。当我们在设计页面时涉及元素的缩放、拉伸收缩、方向改变的场合，使用Flex布局就能感受到它的灵活性了。
↩︎采用Flex布局的元素，称为伸缩容器(flex container)，简称“容器”。它的子元素，也就是容器成员，称为伸缩项目(flex item)，简称“项目”。
伸缩容器存在着两根轴：水平的主轴(main axis)和垂直的侧轴(cross axis)。主轴的起始位置叫作main start，结束位置叫作main end；侧轴的起始位置叫作cross start，结束位置叫作cross end。伸缩项目沿着容器的主轴排列，项目在主轴上占据的空间就是主轴尺寸(main size)，占据的侧轴空间叫作侧轴尺寸(cross size)。
主轴不一定是水平的，这取决于“justify-content”属性的值
项目主要的大小属性，也就是主轴尺寸，要么是项目的宽度(width)，要么是高度(height)，具体是哪个要看哪个值对应着主轴的方向。 ↩︎
