支付宝小程序组件、view视图容器、swiper视图容器

179 阅读3分钟

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

组件

组件是对数据和方法的简单封装。组件可以有自己的属性和方法,属性是组件数据的简单访问者,方法则是组件的一些简单而可见的功能。

数据绑定

通过Mustache语法两对大括号{{}}绑定动态数据。

共有属性

所有组件都包含以下属性

image.png

属性类型

image.png

组件列表

组件包括视图容器。基础内容、表单组件、导航、媒体组件、画布、地图、开放组件以及无障碍访问类型组件,具体组件信息可通过下文列表查询

视图容器

image.png

基础内容

image.png

表单组件

image.png

导航

image.png

媒体组件

image.png

画布

image.png

地图

image.png

开放组件

image.png

无障碍访问

image.png

页面属性配置节点

image.png

视图容器

view视图容器

类似于HTML的div元素

使用限制

  • view 组件可通过固定宽度或者高度,使用 overflow-x 或者 overflow-y 设置为 scroll 属性进行滚动,也可通过 [scroll-view] 制作滚动视图。
  • view 组件不支持覆盖 map 组件,可通过同层渲染实现 [cover-view]覆盖 [map]组件。
属性说明

image.png

  • 示例代码:

image.png

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。

image.png

属性

image.png

image.png

image.png

image.png

image.png