夏2同学的个人小站
微信小程序_基础组件学习02
swiper组件
swiper是滑块容器，也就是手机端的轮播图。
swiper组件有两部分组成swiper和swiper-item。
swiper-item需要放在swiper这个容器里面。
html
<swiper>
<swiper-item class="bannerItem">
</swiper-item>
<swiper-item class="bannerItem">
</swiper-item>
</swiper>| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| 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 | 否 |
indicator-dots 用于开启指定点（轮播图必备）
indicator-color用于指示点的颜色，一般设置为rgba(0,0,0,.5)
circular 开启后，当当前在最后一张时，向后滑动会来到第一张。
button组件
只要谈到表单就离不开的按钮组件。
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| size | string | default | 否 | 按钮的大小 |
| type | string | default | 否 | 按钮的样式类型 |
| plain | boolean | false | 否 | 按钮是否镂空，背景色透明 |
| disabled | boolean | false | 否 | 是否禁用 |
| loading | boolean | false | 否 | 名称前是否带 loading 图标 |
| form-type | string | 否 | 用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件 | |
| open-type | string | 否 | 微信开放能力 |
特别提醒：微信小程序里的button是块级标签，也就是说当只有一个button时候，它会独占一行。
html
<button type="primary">按钮</button>
type的主要值
| 值 | 说明 |
|---|---|
| primary | 绿色 |
| default | 白色 |
| warn | 红色 |
radio-group和radio组件
单选组件, 只能选择radio-group中的一个。
html
<radio-group>
<radio value="0">男</radio>
<radio value="1">女</radio>
</radio-group>check-group和checkbox组件
复选组件，可以选择多个。
html
<view>
爱好:
<checkbox-group>
<checkbox value="0">篮球</checkbox>
<checkbox value="1">足球</checkbox>
<checkbox value="2">羽毛球</checkbox>
</checkbox-group>
</view>input组件
input组件作为输入框，form表单中不可或缺的重要元素。
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| value | string | 是 | 输入框的初始内容 | |
| type | string | text | 否 | input 的类型 |
| password | boolean | false | 否 | 是否是密码类型 |
| placeholder | string | 是 | 输入框为空时占位符 | |
| placeholder-style | string | 是 | 指定 placeholder 的样式 | |
| placeholder-class | string | input-placeholder | 否 | 指定 placeholder 的样式类 |
| disabled | boolean | false | 否 | 是否禁用 |
| maxlength | number | 140 | 否 | 最大输入长度，设置为 -1 的时候不限制最大长度 |
input表单有一个缺点，那就是它默认没有外边框。得通过自己写css来添加外边框。
html
<form action="#">
<input class="viewIpt" placeholder="请输入用户名" />
<input class="viewIpt" placeholder="请输入密码" password="true"/>
</form>css
.viewIpt{
border: 1px solid black;
border-radius: 4px;
margin: 8px;
padding: 4px;
}switch组件
switch组件就是滑块，自带很漂亮的动画。
.gif)
progress组件
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| percent | number | 否 | 百分比0~100 | |
| show-info | boolean | false | 否 | 在进度条右侧显示百分比 |
| border-radius | number/string | 0 | 否 | 圆角大小 |
| font-size | number/string | 16 | 否 | 右侧百分比字体大小 |
| stroke-width | number/string | 6 | 否 | 进度条线的宽度 |
| color | string | #09BB07 | 否 | 进度条颜色（请使用activeColor） |
| activeColor | string | #09BB07 | 否 | 已选择的进度条的颜色 |
进度条，这种东西可以大大提高用户的使用体验。
html
<view>
<progress percent="100" active="true" show-info="true" border-radius="10">
</progress>
</view>