uni-app组件——视图容器

ssyyyxxx

关注

最新推荐文章于 2026-03-12 18:15:00 发布 · 903 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

· GEO检测

uniapp u-view插件中骨架屏的使用【代码】uniapp u-view插件中骨架屏的使用。阅读详情

1. `<view>` 基础容器

作用：类似 HTML 的 <div>，用于布局和内容分组。
特性：
- 支持 Flex 布局
- 支持点击事件（@tap）
- 支持 hover 效果

示例：

<view class="container" hover-class="hover-style" @tap="handleTap">
  <text>基础容器</text>
</view>

.container {
  padding: 20rpx;
  background-color: #f0f0f0;
}
.hover-style {
  background-color: #e0e0e0;
}

2. `<scroll-view>` 可滚动容器

作用：实现局部区域滚动（支持横向/纵向）。
关键属性：
- scroll-y/scroll-x：允许纵向/横向滚动
- scroll-top/scroll-left：控制滚动位置
- @scroll：监听滚动事件

示例：

<scroll-view scroll-y style="height: 300rpx" @scroll="onScroll">
  <view v-for="i in 50" :key="i">第 {{i}} 行</view>
</scroll-view>

onScroll(e) {
  console.log('滚动位置:', e.detail.scrollTop)
}

3. `<swiper>` 轮播容器

作用：实现轮播图效果（需配合 <swiper-item> 使用）。
关键属性：
- indicator-dots：显示指示点
- autoplay：自动播放
- interval：切换间隔（毫秒）
示例：

4. <movable-area> & <movable-view> 可拖动容器
作用：实现元素在指定区域内拖拽。
规则：
- movable-view 必须作为 movable-area 的直接子元素
- movable-area 需设置宽高

示例：

<movable-area style="width: 300rpx; height: 300rpx; background: #eee;">
  <movable-view direction="all" style="width: 100rpx; height: 100rpx; background: blue;">
    拖拽我
  </movable-view>
</movable-area>

5. `<cover-view>` & `<cover-image>` 覆盖原生组件

作用：覆盖在原生组件（如地图、视频）上层的特殊容器。
限制：
- 仅支持嵌套 <cover-view>、<cover-image>、<button>
- 样式有限（部分 CSS 不支持）

示例（覆盖在地图上）：

<map style="width: 100%; height: 400rpx;">
  <cover-view class="tip">地图标记说明</cover-view>
  <cover-image src="/static/icon.png" style="left: 50rpx; top: 50rpx;"></cover-image>
</map>

6. `<page-container>` 页面容器

作用：实现弹层页面（类似微信小程序 "半屏页面"）。
特性：
- 从底部/右侧滑出
- 覆盖当前页面

示例：

<button @tap="showPopup">打开弹层</button>
<page-container :show="show" position="bottom" @hide="show = false">
  <view style="height: 60vh; padding: 20rpx;">弹层内容</view>
</page-container>