开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第16天,点击查看活动详情
组件
组件是对数据和方法的简单封装。组件可以有自己的属性和方法,属性是组件数据的简单访问者,方法则是组件的一些简单而可见的功能。
数据绑定
通过Mustache语法两对大括号{{}}绑定动态数据。
共有属性
所有组件都包含以下属性
属性类型
组件列表
组件包括视图容器。基础内容、表单组件、导航、媒体组件、画布、地图、开放组件以及无障碍访问类型组件,具体组件信息可通过下文列表查询
视图容器
基础内容
表单组件
导航
媒体组件
画布
地图
开放组件
无障碍访问
页面属性配置节点
视图容器
view视图容器
类似于HTML的div元素
使用限制
- view 组件可通过固定宽度或者高度,使用 overflow-x 或者 overflow-y 设置为 scroll 属性进行滚动,也可通过 [scroll-view] 制作滚动视图。
- view 组件不支持覆盖 map 组件,可通过同层渲染实现 [cover-view]覆盖 [map]组件。
属性说明
- 示例代码:
swiper滑块视图容器
滑块视图容器。其中仅可放置 swiper-item
,否则会导致未定义的行为。
swiper 的高度
可以通过设置 swiper-item 元素高度来控制,也可以通过设置 swiper 的整体高度来控制(通过组件的 adjust-height 属性来具体实现)
使用限制
- swiper 组件不可以放在地图上用,
map(属于原生组件,不是后期封装的)
组件是由客户端创建的原生组件,原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法在原生组件之上。 - swiper 组件的首张图片与左边的间隔可以和组件中 item 的图片间隔保持一致,可以根据
previous-margin
设置一下前边距。 - 调用 swiper 组件,swiper-item 嵌套 cover-view 会导致最后一个 swiper-item 后有很大的空白,且 swiper-item 不能添加事件,建议使用 [view] 做嵌套。
- swiper 可以有多个 swiper-item,但是前台完整展示的只有一个。
轮播滑块视图容器
- block上不能加key
- current初始化的时候显示第几张图片
- duration几秒换一张图
- circular是否无限滚动
- autoplay是否自动滚动
- indicator-active-color设置指示点颜色
- next-margin停留时与后面图片的距离
- previous-margin停留时与前面图片的距离
- acceleration根据滑动速度连续滑动多屏
- onChange事件当图片发生改变时做的操作
- onTransition事件当swiper-item位置发生改变会触发
- onAnimationEnd事件动画结束时会触发 event.detail = {current, source},其中 source 的值有 autoplay 和 touch。