Skip to content
On this page

远方

微信小程序_基础组件学习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-dotsbooleanfalse是否显示面板指示点
indicator-colorcolorrgba(0, 0, 0, .3)指示点颜色
indicator-active-colorcolor#000000当前选中的指示点颜色
autoplaybooleanfalse是否自动切换
intervalnumber5000自动切换时间间隔
circularbooleanfalse

indicator-dots 用于开启指定点(轮播图必备)

indicator-color用于指示点的颜色,一般设置为rgba(0,0,0,.5)

circular 开启后,当当前在最后一张时,向后滑动会来到第一张。

button组件

只要谈到表单就离不开的按钮组件。

属性类型默认值必填说明
sizestringdefault按钮的大小
typestringdefault按钮的样式类型
plainbooleanfalse按钮是否镂空,背景色透明
disabledbooleanfalse是否禁用
loadingbooleanfalse名称前是否带 loading 图标
form-typestring用于 form 组件,点击分别会触发 form 组件的 submit/reset 事件
open-typestring微信开放能力

特别提醒:微信小程序里的button是块级标签,也就是说当只有一个button时候,它会独占一行。

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

image-20200916205254004

type的主要值

说明
primary绿色
default白色
warn红色

radio-group和radio组件

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

image-20200916205829837

html
<radio-group>
  <radio value="0"></radio>
  <radio value="1"></radio>
</radio-group>

check-group和checkbox组件

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

image-20200916210049884

html
<view>
  爱好:
  <checkbox-group>
    <checkbox value="0">篮球</checkbox>
    <checkbox value="1">足球</checkbox>
    <checkbox value="2">羽毛球</checkbox>
  </checkbox-group>
</view>

input组件

input组件作为输入框,form表单中不可或缺的重要元素。

属性类型默认值必填说明
valuestring输入框的初始内容
typestringtextinput 的类型
passwordbooleanfalse是否是密码类型
placeholderstring输入框为空时占位符
placeholder-stylestring指定 placeholder 的样式
placeholder-classstringinput-placeholder指定 placeholder 的样式类
disabledbooleanfalse是否禁用
maxlengthnumber140最大输入长度,设置为 -1 的时候不限制最大长度

input表单有一个缺点,那就是它默认没有外边框。得通过自己写css来添加外边框。

image-20200916214015168

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组件就是滑块,自带很漂亮的动画。

![动画 (4)](http://imgbed-xia-2.oss-cn-hangzhou.aliyuncs.com/img/动画 (4).gif)

progress组件

属性类型默认值必填说明
percentnumber百分比0~100
show-infobooleanfalse在进度条右侧显示百分比
border-radiusnumber/string0圆角大小
font-sizenumber/string16右侧百分比字体大小
stroke-widthnumber/string6进度条线的宽度
colorstring#09BB07进度条颜色(请使用activeColor)
activeColorstring#09BB07已选择的进度条的颜色

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

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

image-20200916214741121