微信小程序-常用的视图容器类组件

news2025/3/15 7:22:20

一.组件分类

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。

官方把小程序的组件分为了9大类:

(1) 视图容器
(2) 基础内容
(3) 表单组件
(4)导航组件
(5) 媒体组件
(6) map 地图组件
(7) canvas 画布组件
(8) 开放能力
(9) 无障碍访问

二.常用的视图容器类组件

1.view

普通的视图区域类似于HTML中的div,是一个块级元素常用来实现页面的布局效果

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

<!--pages/list/list.wxml-->
<view class="test">
  <view>text1</view>
  <view>text2</view>
  <view>text3</view>
</view>

/* pages/list/list.wxss */
.test view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.test view:nth-child(1) {
  background-color: lightgreen;
}

.test view:nth-child(2) {
  background-color: lightskyblue;
}

.test view:nth-child(3) {
  background-color: lightpink;
}

.test{
  flex-direction: row;
  justify-content: space-around;
}

注意:类名不能单纯的是container,因为container是默认的全局类名,会有冲突,导致编译结果显示不出来(为什么我会知道呢,因为这都是孩子血与泪的教训,摸索一下午不知道哪里错了)

还有就是,不要忘记把list页面置顶,view后面也不要加空格...

2.scroll-view

可滚动的视图区域常用来实现滚动列表效果

实现如图所示的纵向滚动效果:

<!--pages/list/list.wxml-->
<!-- scroll-y属性：允许纵向滚动 -->
<!-- scroll-x属性：允许横向滚动 -->
<!-- 注意：使用竖向滚动时，必须给scroll-view一个固定高度 -->

<scroll-view class="test" scroll-y>
  <view>text1</view>
  <view>text2</view>
  <view>text3</view>
</scroll-view>

/* pages/list/list.wxss */
.test view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.test view:nth-child(1) {
  background-color: lightgreen;
}

.test view:nth-child(2) {
  background-color: lightblue;
}

.test view:nth-child(3) {
  background-color: lightpink;
}

.test{
  border: 1px solid red;
  height: 120px;
  width: 100px;
}

3.swiper和swiper-item

轮播图容器组件和轮播图item组件

swiper组件的常用属性:

实现如图的轮播图效果:

<!--pages/list/list.wxml-->
<!-- 轮播图 -->
<!-- indicator-dots属性：显示面板指示点 -->
<swiper class="test" indicator-dots>
<!-- 第一项 -->
<swiper-item>
  <view class="text">text1</view>
</swiper-item>
<!-- 第二项 -->
<swiper-item>
  <view class="text">text2</view>
</swiper-item>
<!-- 第三项 -->
<swiper-item>
  <view class="text">text3</view>
</swiper-item>
</swiper>

/* pages/list/list.wxss */
.test {
  height: 150px; /*轮播图容器的高度*/
}

.text {
  height: 100%;
  line-height: 150px;
  text-align: center;
}

swiper-item:nth-child(1){
  background-color: lightpink;
}

swiper-item:nth-child(2){
  background-color: lightcoral;
}

swiper-item:nth-child(3){
  background-color: lightgreen;
}

4.root-portal

使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。

主要用于制作弹窗、弹出层等。

5.page-container

页面容器。

小程序如果在页面内进行复杂的界面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。为此提供“假页”容器组件，效果类似于popup弹出层，页面内存在该容器时，当用户进行返回操作，关闭该容器不关闭页面。返回操作包括三种情形，右滑手势、安卓物理返回键和调用navigateBack接口

6.movable-view

可移动的视图容器，在页面中可以拖拽滑动.movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动

7.movable-area

movable-view的可移动区域

8.match-media

media query 匹配检测节点。可以指定一组 media query 规则，满足时，这个节点才会被展示。

通过这个节点可以实现“页面宽高在某个范围时才展示某个区域”这样的效果。

9.cover-view

覆盖在原生组件之上的文本视图。

例如: