文本1

(1)定义样式，例：

.样式名 {width: 宽值rpx;height: 高值rpx;background-color: white;...
}

(2)使用：

...子布局

2.滚动标签(类似ScrollView)：

说明：

scroll-x：true允许横向滚动，需在样式中指定宽度
scroll-y：true允许纵向滚动，需在样式中指定高度
enable-passive：true开启passive特性，优化滚动性能

使用：

...子布局

3.+实现列表(类似ListView)：

(1)初始化数据：

Page({data: {listData: [ ...]  //listData为自定义key名},
})

(2)定义列表与item样式：

.swiper_class { //列表样式width: 宽度px;height: 高度px;...
}
.swiper_item_class { //item样式width: 宽度px;height: 高度px;...
}

(3)+实现列表：

属性说明：

vertical：滑动方向是否为纵向，无此字段时不会滚动

例：

{listData}}" wx:for-item="item">...item布局

4.实现对话框：

属性说明：

enable：true从页面中脱离出来

例：

{ isShow }}">...子布局

5.实现popup弹窗：

属性说明：

show：true显示弹窗，false隐藏弹窗
overlay：true显示遮罩层
position：弹出位置，值：top、bottom、right、center
round：true显示圆角

例：

...子布局

三、表单标签：

1.按钮标签：

size：按钮大小，值：mini为小尺寸、default为默认(大)
type：按钮样式，值：default为绿字灰背景(带框时黑字黑框)、primary为白字绿背景(带框时绿字绿框)、warn为红字灰背景(带框时红字红框)
plain：是否带框无背景
disabled：是否禁用按钮(灰色不能点击)
loading：按钮左内是否显示加载中图标
form-type：按钮在表单中类别，值：submit为提交、reset为重置表单

(1).wxml中显示按钮：

按钮

2.输入框标签：

属性说明：

value：输入框的值
type：输入框类型，值：text(标准键盘)、number(数字键盘)、idcard(身份证键盘)、digit(带小数点数字键盘)、safe-password(密码键盘)、nickname(昵称键盘)
password：是否为密码框
placeholder：提示文字
placeholder-class：提示文字样式类
disabled：是否禁用输入
maxlength：最大长度
focus：获得焦点
confirm-type：回车键类型，值：send(发送)、search(搜索)、next(下一个)、go(前往)、done(完成)
confirm-hold：按回车键时是否隐藏键盘
adjust-position：弹出键盘时是否上推界面

(1).wxml中显示输入框：

3.复选框标签：

属性说明：

value：checkbox标识，选或不选时触发checkbox-group.bindchange中的函数
disabled：是否禁用
checked：是否选中
color：复选框颜色
bindchange：复选框选中事件监听方法，通过e.detail.value获取选中的列表

(1).wxml中显示复选框：

(2).js中监听复选事件：

Page({onCheckboxChange(e){ //复选框选中事件监听console.log("onCheckboxChange 选择改变 selectList: " + e.detail.value);}
})

4.单选框标签：

属性说明：

value：radio标识，选或不选时触发radio-group.bindchange中的函数
disabled：是否禁用
checked：是否选中
color：单选框颜色
bindchange：单选框选中事件监听方法，通过e.detail.value获取选中的

(1).wxml中显示单选框：

(2).js中监听单选事件：

Page({onRadioChange(e){ //单选框选中事件监听console.log("onCheckboxChange 选择改变 selectItem: " + e.detail.value);}
})

5.可拖动进度条标签：

属性说明：

min：进度最小值，默认0
max：进度最大值，默认100
step：进度步长，值>0且能被(max - min)整除
disabled：是否禁用
value：当前进度值
color：可拖动按钮右侧进度条颜色
activeColor：可拖动按钮左侧进度条颜色
backgroundColor：进度条背景色
block-size：滑块大小值
block-color：滑块颜色
show-value：进度条右侧是否显示进度值
bindchange：进度条监听方法，通过e.detail.value获取进度值

(1).wxml中显示可拖动进度条：

(2).js中监听进度条拖动：

Page({onSliderChange(e){ //进度条拖动事件监听console.log("onSliderChange 进度条拖动 progress: " + e.detail.value);}
})

6.开关标签：

属性说明：

checked：是否选中
disabled：是否禁用
type：样式，值：switch(左右开关样式)、checkbox(复选框样式)
color：开关的颜色
bindchange：开关事件监听方法，通过e.detail.value获取开关状态

(1).wxml中显示开关按钮：

(2).js中监听开关事件：

Page({onSwitchChange(e){ //开关事件监听console.log("onSwitchChange 开关事件 isOpen: " + e.detail.value);}
})

7.

bindsubmit：提交表单时触发的函数，表单内的标签formType="submit"，取表单各项值：e.detail.value.标签name属性值
bindreset：重置表单时触发的函数，表单内的标签formType="reset"

重置提交

(2).js中监听表单提交事件：

Page({onFormSubmit(e){ //表单提交事件监听console.log("onSwitchChange 表单提交事件 input_name: " + e.detail.value.input_name);}
})