微信小程序组件之视图容器组件

WXML

• WXML的全称是WeiXin Markup Language（微信标记语言），类似于HTML也是一种使用<标签>和</标签>来构建页面结构的语言
• <标签>和</标签>来构建页面结构小程序组件；
• 小程序组件是微信小程序视图层的基本组成单元。

微信小程序组件通用属性

七类

• id:类型String,组件的唯一标识
• class:类型String,组件样式类
• style:类型String,组件内联样式
• hidden:布尔类型，控制组件的显示和隐藏，组件默认显示
• data-*:可以为各种数据类型，当组件触发事件时，会附带将该属性和值发送给对应的事件处理函数
• bind*/catch*:组件的事件，绑定/捕获组件事件

微信小程序组件类别

1. 优先重点掌握组件

• 视图容器：主要用于规划布局页面内容
• 基础内容：用于显示图标、文字等常用基础内容
• 表单：用于制作表单

2. 次优先掌握组件

• 导航：用于跳转指定页面
• 媒体：用于显示图片、音频、视频等多媒体内容
• 地图：用于显示地图效果
• 画布：用于绘制图画内容

3. 选择性掌握组件

• 开放能力

微信小程序组件——视图容器

视图容器组件主要包含5种

组件名称	解释
view	静态视图容器,<view></view>标签表示一个容器区域,该容器本身没有大小和颜色，需要开发者自己进行样式设置。
scroll-view	可滚动视图容器
swiper	滑块视图容器
movable-view	可移动视图容器
cover-view	可覆盖在原生组件上的文本视图容器

swiper滑块视图容器

• 作用:制作幻灯片切换播放效果
• 其中只可放置swiper-item组件，否则会导致未定义的行为
• <swiper>标签必须配合<swiper-item>组件一起使用，该组件才是用于切换的具体内容
• <swiper-item>中可以包含文本或图片，其宽高默认为100%。</