导航|地址|刷新
视图容器 | “人民网+”小程序 | 开放平台










“人民网+”小程序|文档中心






指引

开发

数据

设计

运营











# 视图容器

# 视图容器说明

组件	说明	最低版本
view	视图容器	1.0.0
scroll-view	可滚动视图区域	1.0.0
web-view	web-view 视图	1.0.0
swiper	滑块视图容器	1.0.0
swiper-item	仅可放置在swiper组件中	1.0.0
cover-image	覆盖在原生组件之上的图片视图	2.8.3
cover-view	覆盖在原生组件之上的文本视图	2.8.3
match-media	media query 匹配检测节点	2.9.3
movable-area	movable-view的可移动区域	2.9.3
movable-view	可移动的视图容器，在页面中可以拖拽滑动	2.9.3
page-container	页面容器	2.11.3
share-element	共享元素	2.11.3

# view

属性	类型	默认值	必填	说明	最低版本
hover-class	string	none	否	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果	2.11.4
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态	2.11.4
hover-start-time	number	50	否	按住后多久出现点击态，单位毫秒	2.11.4
hover-stay-time	number	400	否	手指松开后点击态保留时间，单位毫秒	2.11.4

# scroll-view

属性	类型	默认值	必填	说明	最低版本
scroll-x	boolean	false	否	允许横向滚动	1.0.0
scroll-y	boolean	false	否	允许纵向滚动	1.0.0
upper-threshold	number/string	50	否	距顶部/左边多远时，触发 scrolltoupper 事件	1.0.0
lower-threshold	number/string	50	否	距底部/右边多远时，触发 scrolltolower 事件	1.0.0
scroll-top	number/string		否	设置竖向滚动条位置	1.0.0
scroll-left	number/string		否	设置横向滚动条位置	1.0.0
scroll-into-view	string		否	值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素	1.0.0
refresher-enabled	boolean	false	否	开启自定义下拉刷新
refresher-threshold	number	45	否	设置自定义下拉刷新阈值
refresher-default-style	string	"black"	否	设置自定义下拉刷新默认样式，支持设置 black 、 white 、 none， none 表示不使用默认样式
refresher-background	string	"#FFF"	否	设置自定义下拉刷新区域背景颜色
refresher-triggered	boolean	false	否	设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
bindscrolltoupper	eventhandle		否	滚动到顶部/左边时触发	1.0.0
bindscrolltolower	eventhandle		否	滚动到底部/右边时触发	1.0.0
bindscroll	eventhandle		否	滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}	1.0.0
bindrefresherpulling	eventhandle		否	自定义下拉刷新控件被下拉
bindrefresherrefresh	eventhandle		否	自定义下拉刷新被触发
bindrefresherrestore	eventhandle		否	自定义下拉刷新被复位
bindrefresherabort	eventhandle		否	自定义下拉刷新被中止
scroll-with-animation	boolean	false	否	在设置滚动条位置时使用动画过渡
enable-back-to-top	boolean	false	否	iOS点击顶部状态栏、Android 双击标题栏时，滚动条返回顶部，只支持竖向	不支持
enable-flex	boolean	false	否	启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。	不支持
scroll-anchoring	boolean	false	否	开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，Android 下可参考 CSS overflow-anchor 属性。	不支持
enhanced	boolean	false	否	启用 scroll-view 增强特性	2.12.9
bounces	boolean	false	否	iOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效)	2.12.9
show-scrollbar	boolean	true	否	滚动条显隐控制 (同时开启 enhanced 属性后生效)	不支持
paging-enabled	boolean	false	否	分页滑动效果 (同时开启 enhanced 属性后生效)	不支持
fast-deceleration	boolean	false	否	滑动减速速率控制 (同时开启 enhanced 属性后生效)	不支持
binddragstart	eventhandle		否	滑动开始事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft }	不支持
binddragging	eventhandle		否	滑动事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft }	不支持
binddragend	eventhandle		否	滑动结束事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft, velocity }	不支持

# swiper

属性	类型	默认值	必填	说明	最低版本
indicator-dots	boolean	false	否	是否显示面板指示点	1.0.0
indicator-active-color	color	#000000	否	当前选中的指示点颜色	1.0.0
autoplay	boolean	false	否	是否自动切换	1.0.0
current	number	0	否	当前所在滑块的 index	1.0.0
interval	number	5000	否	自动切换时间间隔	1.0.0
duration	number	500	否	滑动动画时长	1.0.0
circular	boolean	false	否	是否采用衔接滑动	1.0.0
vertical	boolean	false	否	滑动方向是否为纵向	1.0.0
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色	2.11.4
previous-margin	string	"0px"	否	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值	不支持
next-margin	string	"0px"	否	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值	不支持
snap-to-edge	boolean	false	否	当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素	不支持
display-multiple-items	number	1	否	同时显示的滑块数量	2.11.4
easing-function	string	"default"	否	指定 swiper 切换缓动动画类型	不支持
bindchange	eventhandle		否	current 改变时会触发 change 事件，event.detail = {current, source}	2.11.4
bindtransition	eventhandle		否	swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}	2.11.4
bindanimationfinish	eventhandle		否	动画结束时会触发 animationfinish 事件，event.detail 同上	2.11.4

# swiper-item

属性	类型	默认值	必填	说明	最低版本
item-id	string		否	该 swiper-item 的标识符	不支持
skip-hidden-item-layout	boolean	false	否	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息	不支持

# cover-image

属性	类型	默认值	必填	说明	最低版本
src	string		否	图标路径	1.0.0
bindload	eventhandle		否	图片加载成功时触发	2.11.4
binderror	eventhandle		否	图片加载失败时触发	2.11.4

# cover-view

属性	类型	默认值	必填	说明	最低版本
scroll-top	number/string		否	设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效	2.11.4

# match-media

属性	类型	默认值	必填	说明	最低版本
min-width	number		否	页面最小宽度（ px 为单位）
max-width	number		否	页面最大宽度（ px 为单位）
width	number		否	页面宽度（ px 为单位）
min-height	number		否	页面最小高度（ px 为单位）
max-height	number		否	页面最大高度（ px 为单位）
height	number		否	页面高度（ px 为单位）
orientation	string		否	屏幕方向（ landscape 或 portrait ）

# movable-area

属性	类型	默认值	必填	说明	最低版本
scale-area	Boolean	false	否	当里面的movable-view设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area	2.11.4

# movable-view

属性	类型	默认值	必填	说明	最低版本
direction	string	none	否	movable-view的移动方向，属性值有all、vertical、horizontal、none	2.11.4
inertia	boolean	false	否	movable-view是否带有惯性	2.11.4
out-of-bounds	boolean	false	否	超过可移动区域后，movable-view是否还可以移动	2.11.4
x	number		否	定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画	2.11.4
y	number		否	定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画	2.11.4
damping	number	20	否	阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快	2.11.4
friction	number	2	否	摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值	1.2.0
disabled	boolean	false	否	是否禁用
scale	boolean	false	否	是否支持双指缩放，默认缩放手势生效区域是在movable-view内	2.11.4
scale-min	number	0.5	否	定义缩放倍数最小值	2.11.4
scale-max	number	10	否	定义缩放倍数最大值	2.11.4
scale-value	number	1	否	定义缩放倍数，取值范围为 0.5 - 10	2.11.4
animation	boolean	true	否	是否使用动画	2.11.4
bindchange	eventhandle		否	拖动过程中触发的事件，event.detail = {x, y, source}	2.11.4
bindscale	eventhandle		否	缩放过程中触发的事件，event.detail = {x, y, scale}，x和y字段在2.1.0之后支持	2.11.4
htouchmove	eventhandle		否	初次手指触摸后移动为横向的移动时触发，如果catch此事件，则意味着touchmove事件也被catch	2.11.4
vtouchmove	eventhandle		否	初次手指触摸后移动为纵向的移动时触发，如果catch此事件，则意味着touchmove事件也被catch	2.11.4

# page-container

属性	类型	默认值	必填	说明	最低版本
show	boolean	false	否	是否显示容器组件	2.11.3
duration	number	300	否	动画时长，单位毫秒	2.11.3
z-index	number	100	否	z-index 层级	2.11.3
overlay	boolean	true	否	是否显示遮罩层	2.11.3
position	string	bottom	否	弹出位置，可选值为 top bottom right center	2.11.3
round	boolean	false	否	是否显示圆角	2.11.3
close-on-slide-down	boolean	false	否	是否在下滑一段距离后关闭	2.11.3
overlay-style	string		否	自定义遮罩层样式	2.11.3
custom-style	string		否	自定义弹出层样式	2.11.3
bind:beforeenter	eventhandle		否	进入前触发	2.11.3
bind:enter	eventhandle		否	进入中触发	2.11.3
bind:afterenter	eventhandle		否	进入后触发	2.11.3
bind:beforeleave	eventhandle		否	离开前触发	2.11.3
bind:leave	eventhandle		否	离开中触发	2.11.3
bind:afterleave	eventhandle		否	离开后触发	2.11.3
bind:clickoverlay	eventhandle		否	点击遮罩层时触发	2.11.3

# share-element

属性	类型	默认值	必填	说明	最低版本
key	string		是	映射标记	2.11.3
transform	boolean	false	否	是否进行动画	2.11.3
duration	number	300	否	动画时长，单位毫秒	2.11.3
easing-function	string	ease-out	否	css缓动函数	2.11.3

# root-portal

属性	类型	默认值	必填	说明	最低版本
enable	boolean	true	否	是否从页面中脱离出来	3.0.14

------
导航页 打开网址