微信小程序开发教程——1.0.3.认识简单的组件

3.1 view组件

view===>视图容器，相当于HTML中的div标签

示例代码：

wxml：
    <view class="test">
      <text>hello world</text>
    </view>

wxcss:
    .test{
      background-color: aqua;
    }

代码位置与格式如下图
在这里插入图片描述

3.2 icon组件

icon===>图标

示例代码：

<icon type="success" size="40" color="red"/>

3.3 progress组件

progress===>进度条

示例代码：

<progress percent="20" show-info />
<progress percent="40" stroke-width="12" />
<progress percent="60" color="pink" />
<progress percent="80" active />

3.4 text组件

text===>文本

示例代码：

<text selectable='true' space='nbsp'>hello world</text>

3.5 scroll-view组件

scroll-view===>可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

示例代码：
注：css样式的类名称为了方便随便起的，平时写代码不建议这么做

.e{
  height: 400rpx;
  width: 200rpx;

 background-color: rgb(230, 26, 26);
}
.aa{
  height: 200rpx;
  width: 300rpx;
background-color: rgb(221, 238, 74);
}
.bb{
  width: 200rpx;
  height: 200rpx;
background-color: rgb(37, 131, 68);
}
.cc{
  width: 200rpx;
  height: 200rpx;
background-color: rgba(105, 46, 160, 0.473);
}

wxml
<scroll-view  scroll-y="true" scroll-x="true" class="e" >
  <view class="aa"></view>
  <view class="bb"></view>
  <view class="cc"></view>
</scroll-view>

3.6 swiper组件

swiper===>滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

示例代码：

<swiper indicator-dots="true" autoplay="true" circular="true" duration="100" >
  <swiper-item><view class="aa"></view></swiper-item>
  <swiper-item><view class="bb"></view></swiper-item>
  <swiper-item><view class="cc"></view></swiper-item>
</swiper>