组件	定义	使用场景
view	最基础的容器组件，相当于 HTML 中的 `<div>`，用于包裹元素并进行布局。	•页面整体布局：通过 `flex` 布局（`display: flex`）实现元素的横向/纵向排列，例如将多个按钮横向排列成导航栏。 •分组与样式隔离：将相关内容（如卡片、列表项）包裹在 `<view>` 中，统一设置背景色、边距等样式。 •条件渲染/循环渲染：结合 `tt:if`、`tt:for` 等指令动态生成内容，例如循环展示列表数据。
scroll-view	内容超出容器范围时支持滚动（横向或纵向）的视图，避免内容溢出。	•长列表展示：当内容（如商品列表、评论、文章）超过屏幕高度时，使用纵向滚动（`scroll-y`）。 •横向滚动菜单：如顶部导航栏选项过多时，使用横向滚动（`scroll-x`），常见于分类导航（如“美食”“服饰”“数码”标签）。 •组件特性：需指定固定高度/宽度（`height`/`width`），支持 `scroll-into-view`（滚动到指定锚点）、`scroll-with-animation`（平滑滚动）等功能。
swiper swiper-item	•`<swiper>` 用于创建滑块视图容器，实现元素（如图文）滑动切换，常用于轮播图、多页面导航。该组件自动处理滑动手势，支持自动播放、显示指示点。 •`<swiper-item>` 是 <swiper> 的子组件，用于定义滑块项内容，每个 <swiper-item> 代表滑块视图的一个页面，<swiper> 可包含多个 <swiper-item>，用户滑动可在它们之间切换。	•首页轮播广告：在电商、资讯类小程序中展示多张广告图或推荐内容（如“抖音商城”首页的促销轮播图）。 •多内容切换：如商品详情页的多图预览、功能模块的分类切换（滑动切换不同Tab内容）。 •组件特性：可配置 `indicator-dots`（显示切换圆点）、`autoplay`（自动播放）、`interval`（切换间隔）等属性。
movable-area movable-view	•`<movable-area>`：可移动区域的容器组件，限定其子组件`<movable-view>`的可移动范围，类似规定可移动元素活动边界的“活动场地”。 •`<movable-view>`：可在`<movable-area>`内移动的组件，支持用户通过触摸手势拖动、缩放，如同“活动场地”里的“活动对象”。	•悬浮操作按钮：在一些小程序中，会有悬浮的客服按钮或者返回顶部按钮，用户可以根据自己的使用习惯将其拖动到合适的位置。 •拼图游戏：在拼图类小游戏中，玩家需要拖动拼图块到正确的位置来完成拼图。此时，每个拼图块就可以用`<movable-view>`表示，整个拼图区域用`<movable-area>`包裹。 •自定义布局：在一些支持用户自定义界面布局的小程序中，用户可以通过拖动组件来调整它们的位置，比如调整卡片组件的位置。
mask	`<mask>`是一个蒙层组件，用于在页面上创建一个半透明的遮罩层，通常覆盖在其他内容之上，起到突出显示特定内容、阻止用户对底层内容进行操作的作用。	•弹窗提示：当需要弹出一个提示框或者确认框时，使用`<mask>`作为背景蒙层，将用户的注意力集中在弹窗内容上，同时阻止用户点击底层页面。 •引导页：在小程序的新用户引导页中，使用蒙层突出显示需要用户关注的部分，引导用户完成特定操作。 •加载中状态：当页面正在加载数据时，显示一个带有加载动画的蒙层，让用户知道程序正在处理，同时防止用户进行其他操作。

目标

本教程将详细介绍如何实现抖音小程序的视图容器功能。

创建抖音小程序项目，只包含 1 个页面。

使用 view 组件创建一个视图容器。

使用 scroll-view 组件为一长段文字实现纯质滚屏。

使用 swiper 和 swiper-item 组件实现 3 个内容的轮播。

使用 movable-area 和 movable-view 组件创建一个可移动区域和容器。

使用 mask 组件创建一个半透明的蒙层。

准备工作

开发抖音小程序的视图容器前，你需要完成以下前置准备，详情请参见开发准备。

•

注册账号并完成认证

•

创建小程序

•

添加协作者/管理员

•

安装抖音开发者工具 IDE

步骤一：在 IDE 新建小程序项目

具体步骤请参见创建小程序项目。

步骤二：使用 view 创建基础页面

在 pages/index/index.ttml 文件中添加以下代码。

view 组件用于包裹页面内容，class 属性用于应用 CSS 样式。

<view class="page-container">
    <view class="title">抖音小程序视图容器组件教程</view>
    <view class="content">
       这是一个使用 view 组件创建的基础页面。
    </view>
    <view class="content">
        在抖音小程序中，视图容器组件是用于组织、布局页面内容，并实现特定视图功能的基础组件，类似于 HTML 中的容器元素。它们的核心作用是承载其他内容（如文本、图片、按钮等），控制内容的展示方式（如布局、滚动、轮播、移动、遮罩等），并提供交互或功能性的视图效果。
    </view>
  </view>

在 pages/index/index.ttss 文件中添加以下样式。

.page-container {
  padding: 20rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20rpx;
}

.content {
  font-size: 28rpx;
  color: #666;
  text-align: center;
}

◦

.page-container 类设置了页面的内边距，使内容不会紧贴屏幕边缘。

◦

.title 类设置了标题的字体大小、粗细和居中对齐。

◦

.content 类设置了内容的字体大小、颜色和居中对齐。

创建完整后，页面如下：

步骤三：使用 scroll-view 实现滚动

页面中有一段较长的文字，如果页面中还要包含其它内容，较长的文字会占用较大的空间。可以使用 scroll-view 组件创建可滚动的视图容器，讲篇幅较长的内容放到容器中。当内容超出容器范围时，可以通过滚动查看全部内容。

在 pages/index/index.ttml 文件中，将该长文本置于 <scroll-view> 标签内，添加 scroll-y 属性以实现垂直滚动功能，并为 <scroll-view> 标签添加类 scroll-content。

<scroll-view scroll-y class="scroll-content">
    <view>
        在抖音小程序中，视图容器组件是用于组织、布局页面内容，并实现特定视图功能的基础组件，类似于 HTML 中的容器元素。它们的核心作用是承载其他内容（如文本、图片、按钮等），控制内容的展示方式（如布局、滚动、轮播、移动、遮罩等），并提供交互或功能性的视图效果。
    </view>
</scroll-view>

在 pages/index/index.ttss 文件中添加 scroll-content类的样式。

.scroll-content {
  padding: 20rpx;
  font-size: 36rpx;
  height: 200rpx;
  border: 1px;
  margin-top: 20px;
}

添加完成后，页面变成：

步骤四：使用 swiper 和 swiper-item 实现轮播

如果需要在页面中嵌入轮播广告或不同的内容，可以使用 swiper 组件用于创建滑块视图容器，使用 swiper-item 组件用于定义每个滑块项。

在 pages/index/index.ttml 文件中添加以下代码。

◦

swiper 组件属性：

▪

indicator-dots 属性表示显示指示点。

▪

autoplay 属性表示自动播放。

▪

interval 属性表示自动切换的时间间隔，单位毫秒。

◦

swiper-item 组件用于定义每个滑块项，内部可以包含任意组件。

<swiper indicator-dots autoplay interval="3000">
    <swiper-item>
      <view class="swiper-slide">幻灯片 1</view>
    </swiper-item>
    <swiper-item>
      <view class="swiper-slide">幻灯片 2</view>
    </swiper-item>
    <swiper-item>
      <view class="swiper-slide">幻灯片 3</view>
    </swiper-item>
</swiper>

在 pages/index/index.ttss 文件中添加以下样式。

.swiper-slide 类设置了滑块项的样式，包括居中对齐、字体大小和背景颜色。

.swiper-slide {
  margin: 20rpx;
  height: 80%;
  display:flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  background-color: #13c2c2;
}

添加完成后，页面变成：

步骤五：使用 movable-area 和 movable-view 创建可移动区域和容器

如果需要在界面中添加如悬浮按钮，可以使用 movable-area 组件创建可移动的区域，使用 movable-view 组件创建在该区域内移动的容器。

在 pages/index/index.ttml 文件中添加以下代码。

<movable-area>
    <movable-view direction="all">可移动</movable-view>
</movable-area>

在 pages/index/index.ttss 文件中添加以下样式。

movable-area {
  height: 300rpx;
  width: 670rpx;
  margin: 20rpx;
  background-color: #fff;
  border: 1px solid #ccc;
  overflow: hidden;
}

movable-view {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  width: 100rpx;
  background: #13c2c2;
  color: #fff;
}

添加完成后，页面变成：

步骤六：使用 mask 组件添加蒙层

如需在界面中添加弹窗提示或引导页，可以使用 mask 组件创建一个半透明的蒙层。

在 pages/index/index.ttml 文件中添加以下代码。

◦

button 组件用于触发显示蒙层的操作，bindtap 属性绑定了 showMask 事件处理函数。

◦

mask 组件的 hidden 属性来控制蒙层的显示和隐藏。

<view>
    <button bindtap="showMask">展示 mask（3 秒后隐藏）</button>
</view>

<mask hidden="{{hidden}}"></mask>

在 pages/index/index.js 文件中添加以下代码。

◦

data 对象：仅含 hidden 属性，初始值为 true。小程序里，data 数据可在页面模板文件使用，能用 this.setData 更新。hidden 用于控制元素显隐，true 时隐藏，false 时显示。

◦

showMask 方法：用于显示蒙层并 3 秒后隐藏。

▪

this.setData({ hidden: false });：更新 data 中 hidden 为 false 以显示蒙层，触发页面重渲染。

▪

setTimeout(() => { ... }, 3000);：3 秒后执行回调，再次调用 this.setData({ hidden: true }); 隐藏蒙层。

Page({
  data: {
      hidden: true,
  },
  showMask() {
      this.setData({
          hidden: false
      });

      setTimeout(() => {
          this.setData({
              hidden: true
          });
      }, 3000);
  },
});

在 pages/index/index.ttss 文件中添加以下样式。

button {
  margin: 20px;
}

添加完成后，页面变成：

结果验证

您可以在 IDE 中验证本教程实现的各个功能，也可以对小程序进行预览和调试，详情请参见 IDE 调试和真机调试。