(四)小程序组件篇-常用组件

349 阅读1分钟

组件篇

组件分类

小程序中的组件由宿主环境提供,可以基于组件快速搭建漂亮的页面结构

组件分类组要有9大类:

  1. 视图容器
  2. 基础内容
  3. 表单组件
  4. 导航组件
  5. 媒体组件
  6. map地图组件
  7. canvas画布组件
  8. 开放能力
  9. 无障碍访问

常用视图容器类组件

view

  • 普通视图区域(div)
  • 用于实现页面的布局效果 image.png

scroll-view

  • 可滚动的视图区域
  • 用于实现滚动列表效果 image.png

swiper和swiper-item

  • 轮播图容器组件和轮播图item组件 image.png
  • swiper组件常用属性 image.png

常用基础内容组件

text

  • 文本组件(span)

注意:通过text组件的 selectable 属性,可以实现长按选中文本内容效果

image.png

rich-text

  • 富文本组件
  • 支持把html祖父穿渲染为wxml结构

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

image.png

其他常用组件

button

  • 按钮组件
  • 设置 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等...) image.png

image

  • 图片组件
  • image组件默认宽约300px,高度约240px image.png

在image标签中可以通过 mode 属性指定图片的裁剪和缩放模式

mode属性值: image.png

navigator

  • 页面导航组件(a标签)