小程序组件分类

tzming • 2022-11-12 • 前端, 小程序 • 462 阅读

简介

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了 9 大类

①视图容器

②基础内容

③表单组件

④导航组件

⑤媒体组件

⑥map 地图组件

⑦canvas 画布组件

⑧开放能力

⑨无障碍访问

 

组件

view

普通视图区域

类似于 HTML 中的 div，是一个块级元素

常用来实现页面的布局效果

 

基本使用

实现如图的 flex 横向布局效果

 

scroll-view

可滚动的视图区域

常用来实现滚动列表效果

 

基本使用

实现如图的纵向滚动效果

 

swiper 和 swiper-item

轮播图容器组件 和 轮播图 item 组件

基本使用

 

常用属性

属性 类型 默认值 说明
indicator-dots boolean false 是否显示面板指示点
indicator-color color rgba(0, 0, 0, .3) 指示点颜色
indicator-active-color color #000000 当前选中的指示点颜色
autoplay boolean false 是否自动切换
interval number 5000 自动切换时间间隔
circular boolean false 是否采用衔接滑动

 

text

文本组件

类似于 HTML 中的 span 标签，是一个行内元素

 

基本使用

通过 text 组件的 selectable 属性，实现长按选中文本内容的效果

 

rich-text

富文本组件

支持把 HTML 字符串渲染为 WXML 结构

 

基本使用

通过 rich-text 组件的 nodes 属性节点，把 HTML 字符串渲染为对应的 UI 结构

 

button

按钮组件

功能比 HTML 中的 button 按钮丰富

通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）

基本使用

 

image

图片组件

image 组件默认宽度约 300px、高度约 240px

基本使用

 

属性

image 组件的 mode 属性用来指定图片的裁剪和缩放模式，常用的 mode 属性值如下

mode 值 说明
scaleToFill （默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

 

navigator

页面导航组件

类似于 HTML 中的 a 链接

 

基本使用

todo...

 

 

 

如果您喜欢本站，点击这儿不花一分钱捐赠本站

这些信息可能会帮助到你： 下载帮助 | 报毒说明 | 进站必看

修改版本安卓软件，加群提示为修改者自留，非本站信息，注意鉴别

THE END
分享
二维码
打赏
海报
小程序组件分类
小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。
<<上一篇
下一篇>>