小程序开发.微信小程序中的组件.视图容器组件

---

note：当前本文编辑中… 20220731

jcLee95 的个人博客

邮箱 ：291148484@163.com

CSDN 主页：https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343

本文地址：https://blog.csdn.net/qq_28550263/article/details/126083749

---

目 录

---

1. 概述

2. view 组件 和 scroll-view 组件

• 2.1 组件功能
• 2.2 组件的属性介绍
  • 2.2.1 view 组件的属性
  • 2.2.2 scroll-view 组件的属性
• 2.3 示例

3. movable-view 组件 和 movable-area 组件

• 3.1 组件功能
• 3.2 属性描述
  • 3.2.1 movable-view 组件属性
  • 3.2.2 movable-area组件属性

4. swiper 和 swiper-item 组件

• 4.1 组件功能
• 4.2 属性描述
  • 4.2.1 swiper 组件属性
  • 4.2.2 swiper-item 组件属性

5. match-media 组件

• 5.1 组件功能
• 5.2 属性描述

6. page-container 组件

• 6.1 组件功能
• 6.2 属性描述

7. root-portal 组件

---

1. 概述

视图容器组件用于排版页面与为其他组件提供载体。在微信小程序中提供了如下视图组件：

2. view 组件 和 scroll-view 组件

2.1 组件功能

• view 容器组件在微信小程序中是最基本的容器组件，其就类似于 HTML 中的 div。但是注意，虽然两者各自在不同的体系中发挥着相似的作用，但 view 毕竟不是 div，这体现在 view 和 div 具有不同的属性。比如，在 HTML 中的 div，通过指定属性 contenteditable 的值为 true，就可以让元素可编辑，但是在 微信小程序中的 view，至今没有实现这样的属性。
• scroll-view 组件 为可滚动的视图容器，允许用户通过手指在容器上滑动来改变显示区域。和HTML中使用CSS的 scroll 一样，在平面上可以有 水平 和 垂直 两大可被允许的滚动方向。
• view 组件 和 scroll-view 组件的区别在于，view 组件表示普通的视图区域，而 scroll-view 表示可滚动视图区域。

2.2 组件的属性介绍

2.2.1 view 组件的属性

2.2.2 scroll-view 组件的属性

2.3 示例

3. movable-view 组件 和 movable-area 组件

3.1 组件功能

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

3.2 属性描述

3.2.1 movable-view 组件属性

其中，bindchange 返回的 source 表示产生移动的原因：

3.2.2 movable-area组件属性

4. swiper 和 swiper-item 组件

4.1 组件功能

• swiper 组件是以一个滑块视图容器，通常用于图片之间的切换播放，也就是 Web 中的 轮播图。在 swiper 组件中只可放置 swiper-item 组件，否则会导致未定义的行为。一个swiper 组件看起来就像这样：

4.2 属性描述

4.2.1 swiper 组件属性

4.2.2 swiper-item 组件属性

5. match-media 组件

5.1 组件功能

• media query 匹配检测节点。可以指定一组 media query 规则，满足时，这个节点才会被展示。
• 通过这个节点可以实现“页面宽高在某个范围时才展示某个区域”这样的效果。

5.2 属性描述

<match-media min-width="300" max-width="600">
  <view>当页面宽度在 300 ~ 500 px 之间时展示这里view>
match-media>

<match-media min-height="400" orientation="landscape">
  <view>当页面高度不小于 400 px 且屏幕方向为纵向时展示这里view>
match-media>
1
2
3
4
5
6
7

6. page-container 组件

6.1 组件功能

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

6.2 属性描述

7. root-portal 组件

使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。

例如：

<view class="intro">
  <button bindtap="toggle">显示 root-portalbutton>
  
  <root-portal wx:if="{{ show }}">
    <view class="portal-content">
      root-portal 内容
    view>
  root-portal>
  
view>
1
2
3
4
5
6
7
8
9
10