微信小程序_基础组件学习02

微信小程序_基础组件学习02

swiper组件

swiper是滑块容器，也就是手机端的轮播图。

swiper组件有两部分组成swiper和swiper-item。

swiper-item需要放在swiper这个容器里面。

<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时候，它会独占一行。

<button type="primary">按钮</button>

type的主要值

值	说明
primary	绿色
default	白色
warn	红色

radio-group和radio组件

单选组件, 只能选择radio-group中的一个。

<radio-group>
  <radio value="0">男</radio>
  <radio value="1">女</radio>
</radio-group>

check-group和checkbox组件

复选组件，可以选择多个。

<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来添加外边框。

<form action="#">
  <input class="viewIpt" placeholder="请输入用户名" />
  <input class="viewIpt" placeholder="请输入密码" password="true"/>
</form>

.viewIpt{
  border: 1px solid black;
  border-radius: 4px;
  margin: 8px;
  padding: 4px;
}

switch组件

switch组件就是滑块，自带很漂亮的动画。

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	否	已选择的进度条的颜色

进度条，这种东西可以大大提高用户的使用体验。

<view>
    <progress percent="100" active="true" show-info="true" border-radius="10">
    </progress>
</view>