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

【提示：】

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

二、组件

1、view组件的基本用法

讲解：

分类	详情
语法	在.wxml文件中使用<view>标签创建视图容器，可直接放内容或嵌套<view>标签，如<view class="container1">...</view>
属性值	- class 属性：指定类名用于样式设置，如<view class="my-view-class">。 - id 属性：设置唯一标识符用于 JavaScript 操作，如<view id="unique-view-id">。 - style 属性：设置内联样式，如<view style="width:100px; height:50px; background-color:red;">
适用场景	- 页面布局：作为基础组件划分页面区域，如包裹头部、内容、底部等区域并放置相关组件。 - 内容承载：承载各种内容组件，如展示产品文字和图片并设置样式
注意点	- 样式关联：确保.wxss中定义对应类选择器样式。 - 嵌套布局：注意层级关系，规划调整组件尺寸位置，考虑样式优先级避免冲突

案例：

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

• 【效果图】

• 【代码】

.wxml

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

.wxml解释：

代码内容	说明	涉及语法及作用
<view class="container1">	创建一个作为外层容器的视图，后续其他视图元素将放置在其内部，并且通过设置的类名container1可在样式文件中对其样式进行定制化设置。	- <view>：微信小程序中的视图容器标签，用于布局和承载内容展示。 - class属性：用于给元素指定一个类名，以便通过样式表根据该类名来定义元素的样式。
<view>A</view>	在container1容器内创建一个子视图，该子视图显示的内容为字符A。	<view>：作为内容展示的视图容器，这里直接在标签内放置了要展示的文本内容。
<view>B</view>	与上一个类似，在container1容器内创建一个子视图，展示内容为字符B。	同<view>A</view>中的<view>语法作用。
<view>C</view>	同样是在container1容器内创建一个子视图，展示内容为字符C。	同<view>A</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: lightblue;
}
.container1 view:nth-child(3) {
	background-color: lightcoral;
}

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

.wxss解释：

代码片段	说明	涉及语法及作用
.container1 view { width: 100px; height: 100px; text-align: center; line-height: 100px; }	为类名为container1的容器内的所有<view>子元素设置样式。包括统一设置宽度为 100px、高度为 100px，使文本在视图内水平居中（text-align: center），以及通过设置line-height与height相同的值让文本在视图内垂直居中。	- 选择器.container1 view：这是一个后代选择器，表示选择类名为container1的元素内部的所有<view>元素。 - width、height属性：分别用于设置元素的宽度和高度。 - text-align属性：控制文本在元素内的水平对齐方式。 - line-height属性：设置行高，当与元素高度相同时可实现文本垂直居中。
.container1 view:nth-child(1) { background-color: lightgreen; }	为类名为container1的容器内的第一个<view>子元素设置背景颜色为浅绿色（lightgreen）。	- 选择器.container1 view:nth-child(1)：这是一个子元素选择器结合:nth-child()伪类的用法，用于精确选择类名为container1的元素内的第一个<view>子元素。 - background-color属性：用于设置元素的背景颜色。
.container1 view:nth-child(2) { background-color: lightblue; }	为类名为container1的容器内的第二个<view>子元素设置背景颜色为浅蓝色（lightblue）。	与上述为第一个子元素设置样式类似，只是这里通过:nth-child(2)选择了第二个子元素，并设置相应背景颜色。涉及的语法作用同.container1 view:nth-child(1)部分。
.container1 view:nth-child(3) { background-color: lightcoral; }	为类名为container1的容器内的第三个<view>子元素设置背景颜色为浅珊瑚色（lightcoral）。	同理，通过:nth-child(3)选择第三个子元素并设置背景色。语法作用同前面相关部分。
.container1 { display: flex; justify-content: space-around; }	对类名为container1的容器本身设置布局相关样式。将其设置为弹性布局（display: flex），并让其内部的子元素在主轴方向上均匀分布，两端留有空白（justify-content: space-around）。	- display属性：设置元素的显示类型，这里设置为flex表示采用弹性布局。 - justify-content属性：在弹性布局中，用于控制子元素在主轴方向上的对齐和分布方式。space-around值表示子元素均匀分布，且相邻子元素之间、子元素与容器边缘之间的间隔相等。

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

讲解：

分类	详情
语法	在.wxml文件中使用<scroll - view>标签创建可滚动视图容器，如<scroll - view class="container2" scroll - y>，<scroll - view>是标签名，class用于指定类名，scroll - y设置垂直滚动
属性值	- class 属性：给元素指定类名用于样式设置，如<scroll - view class="my - scroll - class">。 - scroll - y 属性：设置为true（可简写）允许垂直滚动，如<scroll - view scroll - y>。 - scroll - x 属性（可能用到）：设置为true允许水平滚动，如<scroll - view scroll - x>
适用场景	当容器内内容超出可视范围时，用于通过滚动查看全部内容，如长列表或多文本信息的展示
注意点	- 样式设置：确保样式文件中定义了相应类选择器样式。 - 滚动方向属性：注意scroll - y和scroll - x设置，避免错误。 - 高度设置：通常需给组件设置固定高度，否则滚动效果可能不佳

案例：

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

• 【效果图】

• 【代码】

.wxml

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

.wxml解释：

代码内容	说明	涉及语法及作用
<scroll-view class="container2" scroll-y>	创建一个可滚动的视图容器，类名为container2，并设置其可在垂直方向（scroll-y）进行滚动。用于当容器内的内容超出容器本身的可视范围时，能够通过滚动来查看全部内容。	- <scroll-view>：微信小程序中的可滚动视图容器标签，用于创建具有滚动功能的区域。 - class属性：给<scroll-view>元素指定类名container2，以便在样式文件中根据该类名来定义其样式。 - scroll-y：这是一个属性，设置为true（这里简写形式，只写属性名即表示启用该属性对应的功能）时，表示允许该滚动视图在垂直方向上滚动。
<view>A</view>	在<scroll-view>容器内创建一个子视图，该子视图显示的内容为字符A。	<view>：作为内容展示的视图容器，这里直接在标签内放置了要展示的文本内容，在<scroll-view>容器内作为其中的一项可滚动展示的内容部分。
<view>B</view>	与上一个类似，在<scroll-view>容器内创建一个子视图，展示内容为字符B。	同<view>A</view>中的<view>语法作用。
<view>C</view>	同样是在<scroll-view>容器内创建一个子视图，展示内容为字符C。	同<view>A</view>中的<view>语法作用。

.wxss