微信小程序开发（教学笔记）——二、组件

【提示：】

• 如果看到讲解内容比较多，没有耐心看的话，直接看案例。
• 第一章是微信小程序认识及讲解，我会尽快发出来。

二、组件

1、view组件的基本用法

讲解：

案例：

​ 实现如图的flex横向布局效果：

• 【效果图】

• 【代码】

.wxml

<view class="container1">
	<view>A</view>
	<view>B</view>
	<view>C</view>
</view>

.wxml解释：

.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: lightblue;
}
.container1 view:nth-child(3) {
	background-color: lightcoral;
}

.container1 {
	display: flex;
	justify-content: space-around;
}

.wxss解释：

2、scroll-view组件的基本用法

讲解：

案例：

​ 实现如图的纵向滚动效果：

• 【效果图】

• 【代码】

.wxml

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

.wxml解释：

.wxss

.container2 view {
  width: 100px;
  height: 120px;
  text-align: center;
  line-height: 100px;
}

.container2 view:nth-child(1) {
	background-color: lightgreen;
}
.container2 view:nth-child(2) {
	background-color: lightblue;
}
.container2 view:nth-child(3) {
	background-color: lightcoral;
}

.container2 {
  border: 1px solid black;
  /* 给scroll-view 固定高度 */
  height: 220px;
  width: 100px;
}

.wxss解释：

3、swiper和swiper-item组件的基本使用

讲解：

案例：

实现如图的轮播图的效果：

• 【效果图】

• 【代码】

.wxml

<!-- 
  轮播图：
  swiper和swiper-item组件的基本使用 
  轮播图区域
  indicator-dots 属性：显示面板指示点
  -->
<swiper class="swiper-container" 
        indicator-dots 
        indicator-color="white" 
        indicator-active-color="gray" 
        autoplay interval="3000" 
        circular>
  <!-- 第1项 -->
  <swiper-item>
    <view class="item">A</view>
  </swiper-item>
  <!-- 第2项 -->
  <swiper-item>
    <view class="item">B</view>
  </swiper-item>
  <!-- 第3项 -->
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

.wxml解释：

【补充：】

swiper 组件的常用属性

.wxss

/* 轮播图：
  swiper和swiper-item组件的基本使用 */
.swiper-container { 
  height: 150px;  /*轮播图容器的高度*/
}
.item {
  height: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) {
  background-color: lightgreen;
}
swiper-item:nth-child(2) {
  background-color: lightblue;
}
swiper-item:nth-child(3) {
  background-color: lightcoral;
}

.wxss解释：

4、常用的基础内容组件

讲解：

案例：

实现如图的效果：

• 【效果图】

• 【代码】

.wxml

<!-- 常用的基础 内容 组件
text 组件和 rich-text 组件 -->
<view>
  手机号支持长按选中效果
  <text selectable>12332123332</text>
</view>

<rich-text nodes="<h1 style='color: red;'>渲染HTML的h1标题</h1>"></rich-text>

.wxml解释：

5、button 按钮的基本使用

讲解：

案例：

实现如图按钮的不同属性效果：

• 【效果图】

• 【代码】

.wxml

<!-- button 按钮的基本使用 -->
<view>~~~~~~~~通过 type 指定按钮类型~~~~~~~~</view>
<button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>

<view>~~~~~~~~size="mini" 小尺寸按钮~~~~~~~~~</view>
<view class="space">
<button size="mini">默认按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
</view>

<view>~~~~~~~~~~~plain 镂空按钮~~~~~~~~~~~</view>
<view class="space">
<button size="mini" plain>默认按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>
</view>

.wxml解释：

.wxss

.space {
  display: flex;
  justify-content: space-around;
  margin: 20px;
}

.wxss解释：

6、image 组件（及mode属性）的基本使用

讲解：

案例：

实现如图显示图片效果并自行扩展mode的其他属性

• 【效果图】

• 【代码】

.wxml

<!-- image 组件的基本使用及 mode 属性 -->
<!-- 1.空图片 -->
<image></image>
<!-- 2.使用 src 指向图片路径 -->
<image src="/images/1.png" mode="aspectFit"></image>

.wxml解释：

【补充：】

mode 属性值说明

.wxss

image {
  /* 通过边框线证明 image 有默认的宽和高 */
  border: 1px solid black;
}

.wxss解释：