学习之路
微信小程序–界面结构
开始学习
UI组件
基本组件
- icon 图标
type 用于指定类型 success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size 用于指定大小 默认20
color 用于指定颜色 与css一样
<!-- icon text progress -->
<!-- success success_no_circle -->
<!-- type用来定义图标类型 -->
<icon type="success_no_circle"></icon>
<!-- size 用于指定图标大小 默认是23 单位是px -->
<icon type="success_no_circle" size="60"></icon>
<!-- color 用于指定图标颜色 -->
<icon type="info " size="60" color="blue"></icon>
- text 文本
相当于css里面的p标签,主要为了可以加class样式
不同:可以嵌套,可以换行
<!-- text 类似于HTML中的a标签,但是p标签不能嵌套 text主要是为了可以很好的控制页面上的内容 text还支持换行 -->
<text>这是一段<text>文
本</text></text>
- progress 进度条
percent 百分比0~100
show-info 在进度条右侧显示百分比
border-radius 显示圆角大小
font-size 显示右侧百分比字体大小
strok-width 进度条线的宽度
active 进度条从左往右的动画
<progress percent="20" show-info active="true"></progress>
表单组件
- button 按钮
size 大小 mini
type 类型 warn 红色 primary 绿色 default 白色
loading 等待
<button type="warn" size="mini" plain loading>这是一个按钮</button>
- checkbox 复选框
value 值
disabled 禁用
checked 选中
color 颜色 - input 输入框
type 类型
placeholder 输入框为空时的占位符
操作反馈组件
- wx.showActionSheet 下拉菜单
wx.showActionSheet({
// 显示出来的项目列表
itemList: ['A','B','C'],
// 点击其中任一项的回调
success:function (res){
// res.cancel 指的是是否点击了取消
if(!res.cancel){
// tapIndex指的是点击的下标
console.log(res.tapIndex)
}
}
})
- wx.showModal 模拟弹窗
wx.showModal({
title: '提示',
content: '这是一个模拟弹窗',
success:function (res){
if(res.confirm){
console.log('用户点击确定')
}
}
})
- wx.showToast() 模拟成功层
wx.showToast({
title: '成功',
// 只支持loading和success loading(废弃)
icon: 'success',
duration: 2000
})