小程序视图容器

122 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第2天,点击查看活动详情

cover-image

目前原生组件均已支持同层渲染,建议使用image替代。

  • 功能描述
    覆盖在原生组件之上的图片视图
    可覆盖的原生组件同cover-view,支持嵌套在cover-view里。

属性说明

image.png

写法

image.png

cover-view

目前原生组件均已支持同层渲染,建议使用view来替代。

  • view:视图容器

image.png

image.png

match-media

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

image.png
属性

image.png

示例代码

image.png

image.png

movable-area

可移动的区域
属性

image.png

  • 示例代码

image.png

movable-view

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

示例代码

image.png

image.png

page-container

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

image.png

image.png
代码示例: image.png

image.png
效果:

image.png

root-portal

功能描述

使整个子树从页面中脱离出来,主要用于制作弹窗、弹出层等。(类似于固定定位)

image.png

scroll-view

区域性的滚动条。可滚动视图区域。使用竖向滚动时,需要给[scroll-view]一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px,[2.4.0]起支持传入单位(rpx/px)。

image.png

share-element

共享元素
共享元素是一种动画形式,类似于flutter Hero动画,表现为元素像是在页面间穿越一样。该组件须与page-container组件结合使用。
使用时需在当前页放置 share-element 组件,同时在 page-container 容器中放置对应的 share-element 组件,对应关系通过属性值 key 映射。当设置 page-container 显示时,transform 属性为 true 的共享元素会产生动画。当前页面容器退出时,会产生返回动画。
示例代码: image.png

swiper

  • 功能描述
    滑块视图容器,其中只能放置swiper-item组件,否则会导致未定义的行为。
    属性

image.png

image.png

image.png

image.png
代码示例:

image.png
效果:

image.png

swiper-item

仅可放置在swiper组件中,宽高自动设置为100%。
属性:

image.png