基础标签
视图view
view:类似div,块级元素
文本text
text:类似span,行内元素
text 组件内只支持 text 嵌套
除了文本节点以外的其他节点都无法长按选中
字体图标icon
type:icon的类型
【可选success/success_no_circle/info/warn/waiting/cancel/download/search/clear】
size:icon的大小【默认23,单位默认为px,支持单位rpx/px/rem】
color:icon的颜色
页面跳转navigator
url:小程序内的跳转链接吗
open-type:跳转方式【默认navigate打开新页面,redirect在当前页面打开】
示例:
<navigator url="/pages/other/other" >跳转其他页面</navigator>
轮播和滚动视图
轮播swiper/swiper-item
swiper属性:
indicator-dots:是否显示面板指示点【默认false 】
indicator-color:指示点颜色【默认rgba(0, 0, 0, .3)】
indicator-active-color:当前选中的指示点颜色【默认#000000】
autoplay:是否自动切换【默认false】
interval:自动切换时间间隔【默认5000】
duration:滑动动画时长【默认500】
circular:是否采用衔接滑动【默认false】
vertical:滑动方向是否为纵向【默认false】
示例:
<swiper autoplay="true" circular="true"><swiper-item><image mode="heightFix" src="../../images/swiper/1_800x400.png"></image></swiper-item>
</swiper>
滚动视图scroll-view
可滚动视图区域:东西摆放不开,可采用左右/上下滚动展示
scroll-x:允许横向滚动【默认false】
scroll-y:允许纵向滚动【默认false】
scroll-top:设置竖向滚动条位置
scroll-left:设置横向滚动条位置
refresher-enabled:开启自定义下拉刷新【默认false】
示例
<scroll-view class="scroll-container" scroll-x="true"><view class="scroll-item">1</view><view class="scroll-item">1</view><view class="scroll-item">1</view>
</scroll-view>
.scroll-container {
/* 规定容器内元素不进行换行 */
white-space: nowrap;
}
.scroll-item {
display: inline-block;
width: 100%;
height: 400rpx;
background-color: aquamarine;
}
表单
输入框input
value【必填】:输入框的初始内容
placeholder【必填】:输入框为空时占位符
password:是否是密码类型
disabled:是否禁用
maxlength:最大输入长度,设置为 -1 的时候不限制最大长度
focus:获取焦点
type:input 的类型【text文本/number数字/idcard身份证/digit带小数点的数字/nickname昵称】
confirm-type:设置键盘右下角按钮的文字,仅在type='text'时生效【send发送/search搜索/next下一个/go前往/done完成】
多行输入框textarea
value:输入框的内容
placeholder:输入框为空时占位符
disabled:是否禁用【默认false】
maxlength:最大输入长度【默认140,设置为 -1 的时候不限制最大长度】
focus:获取焦点【默认false】
auto-height:是否自动增高【默认false】
开关选择器switch
checked:是否选中【默认false】
disabled:是否禁用【默认false】
type:样式【有效值:switch, checkbox】
color:switch 的颜色【默认#04BE02】
单选框radio
配合 radio-group 形成一组
复选框checkbox
配合 checkbox-group 形成一组
按钮button
type:按钮的样式类型【primary绿色/default白色/warn红色】
size:按钮的大小【default默认大小/mini小尺寸】
plain:按钮是否镂空
disabled:是否禁用
loading:名称前是否带 loading 图标
form-type:用于form组件,点击分别会触发form组件的 submit/reset 事件
多媒体
图片image
src:图片资源地址
mode:图片裁剪、缩放的模式
mode可选的值:
scaleToFill 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
aspectFit 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
aspectFill 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
widthFix 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变
heightFix 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变
top 裁剪模式,不缩放图片,只显示图片的顶部区域
bottom 裁剪模式,不缩放图片,只显示图片的底部区域
center 裁剪模式,不缩放图片,只显示图片的中间区域
left 裁剪模式,不缩放图片,只显示图片的左边区域
right 裁剪模式,不缩放图片,只显示图片的右边区域
top left 裁剪模式,不缩放图片,只显示图片的左上边区域
top right 裁剪模式,不缩放图片,只显示图片的右上边区域
bottom left 裁剪模式,不缩放图片,只显示图片的左下边区域
bottom right 裁剪模式,不缩放图片,只显示图片的右下边区域
音频audio
可通过动态修改src实现切换音乐功能
id:audio 组件的唯一标识符
src:要播放音频的资源地址
loop:是否循环播放【默认false】
controls:是否显示默认控件【默认false】
poster:默认控件上的音频封面的图片资源地址
name:默认控件上的音频名字【默认未知音频】
author:默认控件上的作者名字【默认未知作者】
视频video
src:要播放视频的资源地址,支持网络路径、本地临时路径
duration:指定视频时长
controls:是否显示默认播放控件(播放/暂停按钮、播放进度、时间)【默认true】
autoplay:是否自动播放【默认false】
loop:是否循环播放【默认false】
muted:是否静音播放【默认false】
initial-time:指定视频初始播放位置【默认0】
show-mute-btn:是否显示静音按钮【默认false】
danmu-list:弹幕列表
danmu-btn:是否显示弹幕按钮,只在初始化时有效,不能动态变更【默认false】
enable-danmu:是否展示弹幕,只在初始化时有效,不能动态变更【默认false】
相机/扫码二维码camera
mode:应用模式,只在初始化时有效,不能动态变更【normal:相机模式 scanCode:扫码模式】【默认normal】
device-position:摄像头朝向【front:前置 back:后置】【默认back】
flash:闪光灯【auto/on/off】【默认auto】
地图map
地图,小程序地图实现功能相对比基础一些,如果要实现完整的地图能力,请参考腾讯地图
腾讯地图:https://lbs.qq.com/product/miniapp/home/
longitude:中心经度
latitude:中心纬度
scale:缩放级别,取值范围为3-20【默认16】
min-scale:最小缩放级别【默认3】
max-scale:最大缩放级别【默认20】
示例:
<map latitude="23.099994" longitude="113.324520" scale="12" min-scale="10" max-scale="18"></map>
选择器
普通选择器
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"><view class="picker">当前选择:{{array[index]}}</view>
</picker>
Page({
data: {
array: ['美国', '中国', '巴西', '日本'],
index: 0
},
bindPickerChange(e) {
this.setData({
index: e.detail.value
})
}
})
多列选择器
<picker mode="multiSelector" bindchange="bindMultiPickerChange" value="{{multiIndex}}" range="{{multiArray}}"><view class="picker">当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}</view>
</picker>Page({
data: {
multiArray: [
['无脊柱动物', '脊柱动物'],
['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'],
['猪肉绦虫', '吸血虫']
],
multiIndex: [0, 0, 0],
},
bindMultiPickerChange: function (e) {
this.setData({
multiIndex: e.detail.value
})
}
})
时间选择器
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange"><view class="picker">当前选择: {{time}}</view>
</picker>
Page({
data: {
time: '12:01'
},
bindTimeChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
time: e.detail.value
})
}
})
日期选择器
<picker mode="date" value="{{date}}" start="2000-09-01" end="2030-09-01" bindchange="bindDateChange"><view class="picker">当前选择: {{date}}</view>
</picker>
Page({
data: {
date: '2030-09-01'
},
bindDateChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
}
})
省市区选择器
<picker mode="region" bindchange="bindRegionChange" value="{{region}}"><view class="picker">当前选择:{{region[0]}},{{region[1]}},{{region[2]}}</view>
</picker>Page({
data: {
region: ['广东省', '广州市', '海珠区']
},
bindRegionChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
region: e.detail.value
})
}
})
进度条和滑块选择器
基本进度条progress
percent:百分比0~100
show-info:是否在进度条右侧显示百分比【默认false】
border-radius:圆角大小【默认0】
font-size:右侧百分比字体大小【默认16】
stroke-width:进度条线的宽度【默认6】
activeColor:进度条颜色【默认#09BB07】
backgroundColor:未选择的进度条的颜色【默认#EBEBEB】
active:进度条从左往右的动画【默认false】
duration:进度增加1%所需毫秒数【默认30】
滑动选择器slider
step:步长【取值必须大于 0,并且可被(max - min)整除】
show-value:是否显示当前value【默认false】
min number:最小值【默认0】
max number:最大值【默认100】
disabled:是否禁用
value:当前取值【默认0】
backgroundColor:背景条的颜色【默认#e9e9e9 】
activeColor:已选择的颜色【默认#1aad19】
block-color:滑块的颜色【默认#ffffff】