微信小程序入门学习
上次已经简单介绍微信小程序入门的准备,今天就继续微信小程序开发学习。
什么是组件?
组件,是视图层的基本组成单元,自带一些功能和微信风格的样式,通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内
属性: 属性类型
共同属性
特殊属性
组件
- view
视图容器,用来在页面划分区域块 - srcoll-view
与view相同功能,但可以滚动。通过加高度实现竖向滚动(wxss-height)
scroll-y;scroll-x - swiper
滑块视图容器,通过手指对屏幕的滑动达到切换容器内容的效果
只可放置<swiper-item />
组件;其他节点会自动删除
<swiper-item />
只可放置在<swiper />
组件中,宽/高度自动设置为100%
属性:
indicator-dots:是否显示面板指示点
autoplay:是否自动切换
current:当前页面的index
interval:自动切换时间间隔
duration:滑动动画时长 - icon
属性:
type:icon的类型
size:大小
color:颜色 - wx:for循环
- text
文本。支持转义符\
。除了文本节点之外其他节点无法长按选中 - progress
进度条
属性:
percent:百分比0-100
show-info:是否在进度条右侧显示百分比
stroke-width:进度条的宽度
color:进度条颜色
active:进度条从左到右的动画 - form
表单,将组件内的用户输入的<switch />``<input />``<checked />``<slider />``<radio />``<picker />
提交
属性:
report-submit:是否返回formID用于返回模板消息
bindsubmit:携带form中的数据触发submit事件
bindreset:表单重置时会触发reset事件 - checkbox
checkbox-group:多项选择器,内部由多个checkbox组成
checkbox:多选项目
属性:
value:标识,选中时触发change事件,并携带value
disabled:是否禁用
checked:是否被选中 - input
输入框
- picker
滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器、时间选择器、日期选择器,默认是普通选择器。开发工具暂时只支持mode=selector
普通选择器:mode=selector
时间选择器:mode=time
日期选择器:mode=date
- radio
单选项目
- slider
滑动选择器
- switch
开关选择器,true,false
- button
按钮
组件之操作反馈类:
- action-sheet
从屏幕底部出现的菜单表,用于选择操作类型进行操作 - modal
模态弹窗,用于操作确认或者错误提示 - toast
消息提示框,用于消息提示 - loading
加载提示,用于加载数据时的界面提示
组件之导航:
<navigator />
用于页面跳转,url为跳转到的链接地址
组件之媒体组件:
- audio
音频 - video
视频 - image
图片 - map
地图 - canvas
画布