极品小程序组件
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>
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
percent | number | 否 | 百分比0~100 | 1.0.0 | |
show-info | boolean | false | 否 | 在进度条右侧显示百分比 | 1.0.0 |
border-radius | number/string | 0 | 否 | 圆角大小 | 2.3.1 |
font-size | number/string | 16 | 否 | 右侧百分比字体大小 | 2.3.1 |
stroke-width | number/string | 6 | 否 | 进度条线的宽度 | 1.0.0 |
color | string | #09BB07 | 否 | 进度条颜色(请使用activeColor) | 1.0.0 |
activeColor | string | #09BB07 | 否 | 已选择的进度条的颜色 | 1.0.0 |
backgroundColor | string | #EBEBEB | 否 | 未选择的进度条的颜色 | 1.0.0 |
active | boolean | false | 否 | 进度条从左往右的动画 | 1.0.0 |
active-mode | string | backwards | 否 | backwards: 动画从头播;forwards:动画从上次结束点接着播 | 1.7.0 |
duration | number | 30 | 否 | 进度增加1%所需毫秒数 | 2.8.2 |
bindactiveend | eventhandle | 否 | 动画完成事件 | 2.4.1 |
小程序input输出框
<input class="weui-input" maxlength="10" placeholder="最大输入长度为10" />
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
value | string | 是 | 输入框的初始内容 | 1.0.0 | |
type | string | text | 否 | input 的类型 | 1.0.0 |
password | boolean | false | 否 | 是否是密码类型 | 1.0.0 |
placeholder | string | 是 | 输入框为空时占位符 | 1.0.0 | |
placeholder-style | string | 是 | 指定 placeholder 的样式 | 1.0.0 | |
placeholder-class | string | input-placeholder | 否 | 指定 placeholder 的样式类 | 1.0.0 |
disabled | boolean | false | 否 | 是否禁用 | 1.0.0 |
maxlength | number | 140 | 否 | 最大输入长度,设置为 -1 的时候不限制最大长度 | 1.0.0 |
cursor-spacing | number | 0 | 否 | 指定光标与键盘的距离,取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 | 1.0.0 |
auto-focus | boolean | false | 否 | (即将废弃,请直接使用 focus )自动聚焦,拉起键盘 | 1.0.0 |
focus | boolean | false | 否 | 获取焦点 | 1.0.0 |
confirm-type | string | done | 否 | 设置键盘右下角按钮的文字,仅在type='text’时生效 | 1.1.0 |
always-embed | boolean | false | 否 | 强制 input 处于同层状态,默认 focus 时 input 会切到非同层状态 (仅在 ios 下生效) | 2.10.4 |
confirm-hold | boolean | false | 否 | 点击键盘右下角按钮时是否保持键盘不收起 | 1.1.0 |
cursor | number | 是 | 指定focus时的光标位置 | 1.5.0 | |
selection-start | number | -1 | 否 | 光标起始位置,自动聚集时有效,需与selection-end搭配使用 | 1.9.0 |
selection-end | number | -1 | 否 | 光标结束位置,自动聚集时有效,需与selection-start搭配使用 | 1.9.0 |
adjust-position | boolean | true | 否 | 键盘弹起时,是否自动上推页面 | 1.9.90 |
hold-keyboard | boolean | false | 否 | focus时,点击页面的时候不收起键盘 | 2.8.2 |
bindinput | eventhandle | 是 | 键盘输入时触发,event.detail = {value, cursor, keyCode},keyCode 为键值,2.1.0 起支持,处理函数可以直接 return 一个字符串,将替换输入框的内容。 | 1.0.0 | |
bindfocus | eventhandle | 是 | 输入框聚焦时触发,event.detail = { value, height },height 为键盘高度,在基础库 1.9.90 起支持 | 1.0.0 | |
bindblur | eventhandle | 是 | 输入框失去焦点时触发,event.detail = {value: value} | 1.0.0 | |
bindconfirm | eventhandle | 是 | 点击完成按钮时触发,event.detail = {value: value} | 1.0.0 | |
bindkeyboardheightchange | eventhandle | 是 | 键盘高度发生变化的时候触发此事件,event.detail = {height: height, duration: duration} | 2.7.0 |
地图属性
地图基础属性
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
longitude | number | 是 | 中心经度 | 1.0.0 | |
latitude | number | 是 | 中心纬度 | 1.0.0 | |
scale | number | 16 | 否 | 缩放级别,取值范围为3-20 | 1.0.0 |
min-scale | number | 3 | 否 | 最小缩放级别 | 2.13.0 |
max-scale | number | 20 | 否 | 最大缩放级别 | 2.13.0 |
markers | Array.
| 否 | 标记点 | 1.0.0 | |
covers | Array. | 否 | 即将移除,请使用 markers | 1.0.0 | |
polyline | Array.
| 否 | 路线 | 1.0.0 | |
circles | Array.
| 否 | 圆 | 1.0.0 | |
controls | Array. | 否 | 控件(即将废弃,建议使用 cover-view 代替) | 1.0.0 | |
include-points | Array. | 否 | 缩放视野以包含所有给定的坐标点 | 1.0.0 | |
show-location | boolean | false | 否 | 显示带有方向的当前定位点 | 1.0.0 |
polygons | Array.
| 否 | 多边形 | 2.3.0 | |
subkey | string | 否 | 个性化地图使用的key | 2.3.0 | |
layer-style | number | 1 | 否 | 个性化地图配置的 style,不支持动态修改 | |
rotate | number | 0 | 否 | 旋转角度,范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角 | 2.5.0 |
skew | number | 0 | 否 | 倾斜角度,范围 0 ~ 40 , 关于 z 轴的倾角 | 2.5.0 |
enable-3D | boolean | false | 否 | 展示3D楼块(工具暂不支持) | 2.3.0 |
show-compass | boolean | false | 否 | 显示指南针 | 2.3.0 |
show-scale | boolean | false | 否 | 显示比例尺,工具暂不支持 | 2.8.0 |
enable-overlooking | boolean | false | 否 | 开启俯视 | 2.3.0 |
enable-zoom | boolean | true | 否 | 是否支持缩放 | 2.3.0 |
enable-scroll | boolean | true | 否 | 是否支持拖动 | 2.3.0 |
enable-rotate | boolean | false | 否 | 是否支持旋转 | 2.3.0 |
enable-satellite | boolean | false | 否 | 是否开启卫星图 | 2.7.0 |
enable-traffic | boolean | false | 否 | 是否开启实时路况 | 2.7.0 |
enable-poi | boolean | true | 否 | 是否展示 POI 点 | 2.14.0 |
enable-building | boolean | 否 | 是否展示建筑物 | 2.14.0 | |
setting | object | 否 | 配置项 | 2.8.2 | |
bindtap | eventhandle | 否 | 点击地图时触发,2.9.0起返回经纬度信息 | 1.0.0 | |
bindmarkertap | eventhandle | 否 | 点击标记点时触发,e.detail = {markerId} | 1.0.0 | |
bindlabeltap | eventhandle | 否 | 点击label时触发,e.detail = {markerId} | 2.9.0 | |
bindcontroltap | eventhandle | 否 | 点击控件时触发,e.detail = {controlId} | 1.0.0 | |
bindcallouttap | eventhandle | 否 | 点击标记点对应的气泡时触发e.detail = {markerId} | 1.2.0 | |
bindupdated | eventhandle | 否 | 在地图渲染更新完成时触发 | 1.6.0 | |
bindregionchange | eventhandle | 否 | 视野发生变化时触发, | 2.3.0 | |
bindpoitap | eventhandle | 否 | 点击地图poi点时触发,e.detail = {name, longitude, latitude} | 2.3.0 | |
bindanchorpointtap | eventhandle | 否 | 点击定位标时触发,e.detail = {longitude, latitude} | 2.13.0 |
小程序音频标签
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
id | string | 否 | audio 组件的唯一标识符 | 1.0.0 | |
src | string | 否 | 要播放音频的资源地址 | 1.0.0 | |
loop | boolean | false | 否 | 是否循环播放 | 1.0.0 |
controls | boolean | false | 否 | 是否显示默认控件 | 1.0.0 |
poster | string | 否 | 默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效 | 1.0.0 | |
name | string | 未知音频 | 否 | 默认控件上的音频名字,如果 controls 属性值为 false 则设置 name 无效 | 1.0.0 |
author | string | 未知作者 | 否 | 默认控件上的作者名字,如果 controls 属性值为 false 则设置 author 无效 | 1.0.0 |
binderror | eventhandle | 否 | 当发生错误时触发 error 事件,detail = {errMsg:MediaError.code} | 1.0.0 | |
bindplay | eventhandle | 否 | 当开始/继续播放时触发play事件 | 1.0.0 | |
bindpause | eventhandle | 否 | 当暂停播放时触发 pause 事件 | 1.0.0 | |
bindtimeupdate | eventhandle | 否 | 当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration} | 1.0.0 | |
bindended | eventhandle | 否 | 当播放到末尾时触发 ended 事件 | 1.0.0 |
以上是关于极品小程序组件的主要内容,如果未能解决你的问题,请参考以下文章