开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第2天,点击查看活动详情
cover-image
目前原生组件均已支持同层渲染,建议使用image替代。
- 功能描述
覆盖在原生组件之上的图片视图
可覆盖的原生组件同cover-view,支持嵌套在cover-view里。
属性说明
写法
cover-view
目前原生组件均已支持同层渲染,建议使用view来替代。
- view:视图容器
match-media
- 功能描述
media query 匹配检测节点。可以指定一组 media query 规则,满足时,这个节点才会被展示。通过这个节点可以实现“页面宽高在某个范围时才展示某个区域”这样的效果
属性
示例代码
movable-area
可移动的区域
属性
- 示例代码
movable-view
可移动的视图容器,在页面中可以拖拽滑动。movable-view必须在movable-area组件中,并且必须是直接子节点,否则不能移动。
示例代码
page-container
- 功能描述
页面容器
小程序如果在页面内进行复杂的界面设计(如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等)用户进行返回操作会直接离开当前页面,不符合用户预期,预期应为关闭当前弹出的组件。为此提供“假页”容器组件。效果类似于popup弹出层,页面内存在该容器时,当用户进行返回操作,关闭该容器不关闭页面。返回操作包括三种情形,右滑手势、安卓物理返回键和调用navigateBack接口。
属性
代码示例:
效果:
root-portal
功能描述
使整个子树从页面中脱离出来,主要用于制作弹窗、弹出层等。(类似于固定定位)
scroll-view
区域性的滚动条。可滚动视图区域。使用竖向滚动时,需要给[scroll-view]一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px,[2.4.0]起支持传入单位(rpx/px)。
share-element
共享元素
共享元素是一种动画形式,类似于flutter Hero动画,表现为元素像是在页面间穿越一样。该组件须与page-container组件结合使用。
使用时需在当前页放置 share-element 组件,同时在 page-container 容器中放置对应的 share-element 组件,对应关系通过属性值 key 映射。当设置 page-container 显示时,transform 属性为 true 的共享元素会产生动画。当前页面容器退出时,会产生返回动画。
示例代码:
swiper
- 功能描述
滑块视图容器,其中只能放置swiper-item组件,否则会导致未定义的行为。
属性
代码示例:
效果:
swiper-item
仅可放置在swiper组件中,宽高自动设置为100%。
属性: