极品小程序组件

Posted 秃头萌新_Ma

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了极品小程序组件相关的知识,希望对你有一定的参考价值。

小程序进度条

<view class="progress-box">
  <progress percent="20" show-info stroke-width="3"/>
</view>

<view class="progress-box">
  <progress percent="40" active stroke-width="3" />
  <icon class="progress-cancel" type="cancel"></icon>
</view>

<view class="progress-box">
  <progress percent="60" active stroke-width="3" />
</view>

<view class="progress-box">
  <progress percent="80" color="#10AEFF" active stroke-width="3" />
</view>
属性类型默认值必填说明最低版本
percentnumber百分比0~1001.0.0
show-infobooleanfalse在进度条右侧显示百分比1.0.0
border-radiusnumber/string0圆角大小2.3.1
font-sizenumber/string16右侧百分比字体大小2.3.1
stroke-widthnumber/string6进度条线的宽度1.0.0
colorstring#09BB07进度条颜色(请使用activeColor)1.0.0
activeColorstring#09BB07已选择的进度条的颜色1.0.0
backgroundColorstring#EBEBEB未选择的进度条的颜色1.0.0
activebooleanfalse进度条从左往右的动画1.0.0
active-modestringbackwardsbackwards: 动画从头播;forwards:动画从上次结束点接着播1.7.0
durationnumber30进度增加1%所需毫秒数2.8.2
bindactiveendeventhandle动画完成事件2.4.1

小程序input输出框

<input class="weui-input" maxlength="10" placeholder="最大输入长度为10" />
属性类型默认值必填说明最低版本
valuestring输入框的初始内容1.0.0
typestringtextinput 的类型1.0.0
passwordbooleanfalse是否是密码类型1.0.0
placeholderstring输入框为空时占位符1.0.0
placeholder-stylestring指定 placeholder 的样式1.0.0
placeholder-classstringinput-placeholder指定 placeholder 的样式类1.0.0
disabledbooleanfalse是否禁用1.0.0
maxlengthnumber140最大输入长度,设置为 -1 的时候不限制最大长度1.0.0
cursor-spacingnumber0指定光标与键盘的距离,取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离1.0.0
auto-focusbooleanfalse(即将废弃,请直接使用 focus )自动聚焦,拉起键盘1.0.0
focusbooleanfalse获取焦点1.0.0
confirm-typestringdone设置键盘右下角按钮的文字,仅在type='text’时生效1.1.0
always-embedbooleanfalse强制 input 处于同层状态,默认 focus 时 input 会切到非同层状态 (仅在 ios 下生效)2.10.4
confirm-holdbooleanfalse点击键盘右下角按钮时是否保持键盘不收起1.1.0
cursornumber指定focus时的光标位置1.5.0
selection-startnumber-1光标起始位置,自动聚集时有效,需与selection-end搭配使用1.9.0
selection-endnumber-1光标结束位置,自动聚集时有效,需与selection-start搭配使用1.9.0
adjust-positionbooleantrue键盘弹起时,是否自动上推页面1.9.90
hold-keyboardbooleanfalsefocus时,点击页面的时候不收起键盘2.8.2
bindinputeventhandle键盘输入时触发,event.detail = {value, cursor, keyCode},keyCode 为键值,2.1.0 起支持,处理函数可以直接 return 一个字符串,将替换输入框的内容。1.0.0
bindfocuseventhandle输入框聚焦时触发,event.detail = { value, height },height 为键盘高度,在基础库 1.9.90 起支持1.0.0
bindblureventhandle输入框失去焦点时触发,event.detail = {value: value}1.0.0
bindconfirmeventhandle点击完成按钮时触发,event.detail = {value: value}1.0.0
bindkeyboardheightchangeeventhandle键盘高度发生变化的时候触发此事件,event.detail = {height: height, duration: duration}2.7.0

地图属性

地图基础属性

属性类型默认值必填说明最低版本
longitudenumber中心经度1.0.0
latitudenumber中心纬度1.0.0
scalenumber16缩放级别,取值范围为3-201.0.0
min-scalenumber3最小缩放级别2.13.0
max-scalenumber20最大缩放级别2.13.0
markersArray. 标记点1.0.0
coversArray.即将移除,请使用 markers1.0.0
polylineArray. 路线1.0.0
circlesArray. 1.0.0
controlsArray.控件(即将废弃,建议使用 cover-view 代替)1.0.0
include-pointsArray.缩放视野以包含所有给定的坐标点1.0.0
show-locationbooleanfalse显示带有方向的当前定位点1.0.0
polygonsArray. 多边形2.3.0
subkeystring个性化地图使用的key2.3.0
layer-stylenumber1个性化地图配置的 style,不支持动态修改
rotatenumber0旋转角度,范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角2.5.0
skewnumber0倾斜角度,范围 0 ~ 40 , 关于 z 轴的倾角2.5.0
enable-3Dbooleanfalse展示3D楼块(工具暂不支持)2.3.0
show-compassbooleanfalse显示指南针2.3.0
show-scalebooleanfalse显示比例尺,工具暂不支持2.8.0
enable-overlookingbooleanfalse开启俯视2.3.0
enable-zoombooleantrue是否支持缩放2.3.0
enable-scrollbooleantrue是否支持拖动2.3.0
enable-rotatebooleanfalse是否支持旋转2.3.0
enable-satellitebooleanfalse是否开启卫星图2.7.0
enable-trafficbooleanfalse是否开启实时路况2.7.0
enable-poibooleantrue是否展示 POI 点2.14.0
enable-buildingboolean是否展示建筑物2.14.0
settingobject配置项2.8.2
bindtapeventhandle点击地图时触发,2.9.0起返回经纬度信息1.0.0
bindmarkertapeventhandle点击标记点时触发,e.detail = {markerId}1.0.0
bindlabeltapeventhandle点击label时触发,e.detail = {markerId}2.9.0
bindcontroltapeventhandle点击控件时触发,e.detail = {controlId}1.0.0
bindcallouttapeventhandle点击标记点对应的气泡时触发e.detail = {markerId}1.2.0
bindupdatedeventhandle在地图渲染更新完成时触发1.6.0
bindregionchangeeventhandle视野发生变化时触发,2.3.0
bindpoitapeventhandle点击地图poi点时触发,e.detail = {name, longitude, latitude}2.3.0
bindanchorpointtapeventhandle点击定位标时触发,e.detail = {longitude, latitude}2.13.0

小程序音频标签

属性类型默认值必填说明最低版本
idstringaudio 组件的唯一标识符1.0.0
srcstring要播放音频的资源地址1.0.0
loopbooleanfalse是否循环播放1.0.0
controlsbooleanfalse是否显示默认控件1.0.0
posterstring默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效1.0.0
namestring未知音频默认控件上的音频名字,如果 controls 属性值为 false 则设置 name 无效1.0.0
authorstring未知作者默认控件上的作者名字,如果 controls 属性值为 false 则设置 author 无效1.0.0
binderroreventhandle当发生错误时触发 error 事件,detail = {errMsg:MediaError.code}1.0.0
bindplayeventhandle当开始/继续播放时触发play事件1.0.0
bindpauseeventhandle当暂停播放时触发 pause 事件1.0.0
bindtimeupdateeventhandle当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration}1.0.0
bindendedeventhandle当播放到末尾时触发 ended 事件1.0.0

以上是关于极品小程序组件的主要内容,如果未能解决你的问题,请参考以下文章

极品小程序组件

极品小程序组件

极品小程序布局,其他组件

极品小程序布局,其他组件

极品小程序中的自定义组件,以及页面的生命周期,应用的生命周期,以及tabber原始文件个个是做什么的

极品小程序中的自定义组件,以及页面的生命周期,应用的生命周期,以及tabber原始文件个个是做什么的