sheet组件详细介绍_JavaScript_脚本之家,sheet底部菜单详解_JavaScript_脚本之家

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

3.toast

toast是消息提示框组件,具有如下属性:

属性名 类型 默认值 说明
duration Float 1500 hidden设置false后,触发bindchange的延时,单位为ms
bindchange EventHandle duration延时后触发
// toast.wxml <view > <toast hidden="{{toast1Hidden}}" bindchange="toast1Change"> 默认 </toast> <button type="default" bindtap="toast1Tap">点击弹出默认toast</button> </view> <view > <toast hidden="{{toast2Hidden}}" duration="3000" bindchange="toast2Change"> 设置duration </toast> <button type="default" bindtap="toast2Tap">点击弹出设置duration的toast</button> </view> // toast.js var toastNum = 2 var pageData = {} pageData.data = {} for(var i = 0; i <= toastNum; ++i) { pageData.data['toast'+i+'Hidden'] = true ;(function  { pageData['toast'+index+'Change'] = function { var obj = {} obj['toast'+index+'Hidden'] = true this.setData } pageData['toast'+index+'Tap'] = function { var obj = {} obj['toast'+index+'Hidden'] = false this.setData } Page

action-sheet组件是从底部弹出可选菜单项,估计也是借鉴IOS的设计添加的,action-sheet有两个子组件, action-sheet-item为每个选项,action-sheet-cancel取消选项,与action-sheet-item中间会有间隔,并且点击会触发action-sheet监听事件

弹出action sheet  {{item}}  取消

var items = ['item1', 'item2', 'item3', 'item4']var pageObject = { data: { actionSheetHidden: true, actionSheetItems: items }, actionSheetTap: function { console.log; this.setData({ actionSheetHidden: !this.data.actionSheetHidden }) }, actionSheetChange: function { this.setData({ actionSheetHidden: !this.data.actionSheetHidden }); console.log("点击ation-sheet-cancel,会触发action-sheet绑定的事件。在这里可以通过改变hidden控制菜单的隐藏"); }}for (var i = 0; i < items.length; ++i) {  { pageObject['bind' + itemName] = function { console.log('click' + itemName, e) } })}Page

1.button

按钮。

属性名 类型 默认值 说明 生效时机 最低版本
size String default 按钮的大小
type String default 按钮的样式类型
plain Boolean false 按钮是否镂空,背景色透明
disabled Boolean false 是否禁用
loading Boolean false 名称前是否带 loading 图标
form-type String 用于 <form/>组件,点击分别会触发 <form/> 组件的 submit/reset 事件
open-type String 微信开放能力 1.1.0
app-parameter String 打开 APP 时,向 APP 传递的参数 open-type="launchApp" 1.9.5
hover-class String button-hover 指定按钮按下去的样式类。当 hover-时,没有点击态效果
hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态 1.5.0
hover-start-time Number 20 按住后多久出现点击态,单位毫秒
hover-stay-time Number 70 手指松开后点击态保留时间,单位毫秒
bindgetuserinfo Handler 用户点击该按钮时,会返回获取到的用户信息,从返回参数的detail中获取到的值同wx.getUserInfo open-type="getUserInfo' 1.3.0
lang String en 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文。 open-type="getUserInfo" 1.3.0
session-from String 会话来源 open-type="contact" 1.4.0
send-message-title String 当前标题 会话内消息卡片标题 open-type="contact" 1.5.0
send-message-path String 当前分享路径 会话内消息卡片点击跳转小程序路径 open-type="contact" 1.5.0
send-message-img String 截图 会话内消息卡片图片 open-type="contact" 1.5.0
show-message-card Boolean false 显示会话内消息卡片 open-type="contact" 1.5.0
bindcontact Handler 客服消息回调 open-type="contact" 1.5.0
bindgetphonenumber Handler 获取用户手机号回调 open-type="getphonenumber" 1.2.0
binderrror Handler 当使用开放能力时,发生错误的回调 open-type="launchApp" 1.9.5

主要属性:

action-sheet是从底部弹出的选择菜单,子菜单通过action-sheet-item和action-sheet-cancel指定,action-sheet-item是菜单项,action-sheet-cancel顾名思义是取消隐藏菜单,我们可以通过为action-sheet-item添加bindtap来触发点击后作出的相应,点击action-sheet-cancel时会触发action-sheet的bindchange事件。可以在bindchange绑定的函数中控制菜单的显示。另外点击空白处时菜单也会隐藏。

1.icon

图标。

属性名 类型 默认值 说明
type String icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size Number 23 icon的大小,单位px
color Color icon的颜色,同css的color

相关文章:

如何让点击空白处时不隐藏图片呢?另外点击取消的时候自动隐藏菜单不就算了,非要自己写一句话让它隐藏,真麻烦。

10.switch

开关选择器。

属性名 类型 默认值 说明
checked Boolean false 是否选中
type String switch 样式,有效值:switch, checkbox
bindchange EventHandle checked 改变时触发 change 事件,event.detail={ value:checked}
color Color switch 的颜色,同 css 的 color
弹出ActionSheet  {{item}}   取消

Page({ data:{ // text:"这是一个页面" actionSheetHidden: true, actionSheetItems: ['item1', 'item2', 'item3'] }, listenerButton: function() { this.setData({ //取反 actionSheetHidden: !this.data.actionSheetHidden }); }, listenerActionSheet:function() { this.setData({ actionSheetHidden: !this.data.actionSheetHidden }) }, onLoad:function{ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function

微信小程序 action-sheet

1.action-sheet

action-sheet是从屏幕底部出现的菜单表的组件,具有bindchange属性,类型为EventHandle,点击背景或action-sheet-cancel按钮时触发change事件,不携带数据。

action-sheet-item为action-sheet的子选项,即底部菜单表的子选项组件。action-sheet-cancel为底部菜单表的取消按钮组件,同<action-sheet-item/>组件的区别是,点击它会触发<action-sheet/>的change事件,并且外观上会同它上面的内容间隔开来。

// action-sheet.wxml <button type="default" bindtap="actionSheetTap">弹出action sheet</button> <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange"> <block wx:for="{{actionSheetItems}}"> <action-sheet-item bindtap="bindItemTap" data-name="{{item}}"> {{item}}</action-sheet-item> </block> <action-sheet-cancel >取消</action-sheet-cancel> </action-sheet> // action-sheet.js Page({ data:{ actionSheetHidden: true, actionSheetItems: ['item1', 'item2', 'item3', 'item4'] }, actionSheetTap: function { this.setData({ actionSheetHidden: ! this.data.actionSheetHidden }) }, actionSheetChange: function { this.setData({ actionSheetHidden: ! this.data.actionSheetHidden }) }, bindItemTap:function{ console.log('tap ' + e.currentTarget.dataset.name) } })

hello WeApp icon组件Window text组件switch组件tabBar底部导航 progress组件action-sheet应用生命周期button组件 modal组件页面生命周期checkbox组件toast组件模块化详form组件详 loading 组件数据绑定input 组件 navigator 组件View组件 picker组件 audio 组件scroll-view组件 radio组件video组件swiper组件 slider组件 Image组件

6.picker

从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。

属性名 类型 默认值 说明
range Array / Object Array [] mode为 selector 或 multiSelector 时,range 有效
range-key String 当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value Number 0 value 的值表示选择了 range 中的第几个
bindchange EventHandle value 改变时触发 change 事件,event.detail = {value: value}
disabled Boolean false 是否禁用
bindcancel EventHandle 取消选择或点遮罩层收起 picker 时触发

2. image

图片。

属性名 类型 默认值 说明 最低版本
src String 图片资源地址
mode String 'scaleToFill' 图片裁剪、缩放的模式
lazy-load Boolean false 图片懒加载。只针对page与scroll-view下的image有效 1.5.0
binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'}
bindload HandleEvent 当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

注:image组件默认宽度300px、高度225pxmode 有效值:mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。

模式 说明
缩放 scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
缩放 aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
缩放 aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
缩放 widthFix 宽度不变,高度自动变化,保持原图宽高比不变
裁剪 top 不缩放图片,只显示图片的顶部区域
裁剪 bottom 不缩放图片,只显示图片的底部区域
裁剪 center 不缩放图片,只显示图片的中间区域
裁剪 left 不缩放图片,只显示图片的左边区域
裁剪 right 不缩放图片,只显示图片的右边区域
裁剪 top left 不缩放图片,只显示图片的左上边区域
裁剪 top right 不缩放图片,只显示图片的右上边区域
裁剪 bottom left 不缩放图片,只显示图片的左下边区域
裁剪 bottom right 不缩放图片,只显示图片的右下边区域

5.cover-view

覆盖在原生组件之上的文本视图,可覆盖的原生组件包括map、video、canvas、camera,只支持嵌套cover-view、cover-image。

cover-image覆盖在原生组件之上的图片视图,可覆盖的原生组件同cover-view,支持嵌套在cover-view里。

属性名 类型 说明
src String 图标路径,支持临时路径、网络地址。暂不支持base64格式。

4.movable-view

可移动的视图容器,在页面中可以拖拽滑动

属性名 类型 默认值 说明
direction String none movable-view的移动方向,属性值有all、vertical、horizontal、none
inertia Boolean false movable-view是否带有惯性
out-of-bounds Boolean false 超过可移动区域后,movable-view是否还可以移动
x Number / String 定义x轴方向的偏移,如果x的值不在可移动范围内,会自动移动到可移动范围;改变x的值会触发动画
y Number / String 定义y轴方向的偏移,如果y的值不在可移动范围内,会自动移动到可移动范围;改变y的值会触发动画
damping Number 20 阻尼系数,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快
friction Number 2 摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值
disabled Boolean false
scale Boolean false 是否支持双指缩放,默认缩放手势生效区域是在movable-view内
scale-min Number 0.5 定义缩放倍数最小值
scale-max Number 10 定义缩放倍数最大值
scale-value Number 1 定义缩放倍数,取值范围为 0.5 - 10
bindchange EventHandle 完成一次拖动后触发的事件,event.detail = {x: x, y: y, source: source},其中source表示产生移动的原因,值可为touch、touch-out-of-bounds、out-of-bounds(超出移动范围后的回弹)、friction和空字符串
bindscale EventHandle 完成一次拖动后触发的事件,event.detail = {scale: scale}

除了基本事件外,movable-view提供了两个特殊事件

类型 触发条件 最低版本
htouchmove 初次手指触摸后移动为横向的移动,如果catch此事件,则意味着touchmove事件也被catch 1.9.90
vtouchmove 初次手指触摸后移动为纵向的移动,如果catch此事件,则意味着touchmove事件也被catch 1.9.90

注意:movable-view必须在<movable-area/>组件中,并且必须是直接子节点,否则不能移动。

movable-areamovable-view 的可移动区域

属性名 类型 默认值 说明 最低版本
scale-area Boolean false 当里面的movable-view设置为支持双指缩放时,设置此值可将缩放手势生效区域修改为整个movable-area 1.9.90

注意:movable-area 必须设置width和height属性,不设置默认为10px

<view > <view >movable-view区域小于movable-area</view> <movable-area style="height: 200px; width: 200px; background: red;"> <movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="all"> </movable-view> </movable-area> <view > <button size="mini" bindtap="tap">click me to move to (30px, 30px)</button> </view> <view >movable-view区域大于movable-area</view> <movable-area style="height: 100px; width: 100px; background: red;"> <movable-view style="height: 200px; width: 200px; background: blue;" direction="all"> </movable-view> </movable-area> <view >可放缩</view> <movable-area style="height: 200px; width: 200px; background: red;" scale-area> <movable-view style="height: 50px; width: 50px; background: blue;" direction="all" bindchange="onChange" bindscale="onScale" scale scale-min="0.5" scale-max="4" scale-value="2"> </movable-view> </movable-area></view>Page({ data: { x: 0, y: 0 }, tap: function { this.setData({ x: 30, y: 30 }); }, onChange: function { console.log }, onScale: function { console.log }})

7.picker-view

嵌入页面的滚动选择器

属性名 类型 说明 最低版本
value NumberArray 数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项,数字大于 picker-view-column 可选项长度时,选择最后一项。
indicator-style String 设置选择器中间选中框的样式
indicator-class String 设置选择器中间选中框的类名 1.1.0
mask-style String 设置蒙层的样式 1.5.0
mask-class String 设置蒙层的类名 1.5.0
bindchange EventHandle 当滚动选择,value 改变时触发 change 事件,event.detail = {value: value};value为数组,表示 picker-view 内的 picker-view-column 当前选择的是第几项

注意:其中只可放置<picker-view-column/>组件,其他节点不会显示。

2.modal

modal为模态弹窗组件,具有如下属性:

属性名 类型 默认值 说明
title String 标题
no-cancel Boolean False 是否隐藏cancel按钮
confirm-text String 确定 confim按钮文字
cancel-text String 取消 cancel按钮文字
bindcomfirm EventHandle 点击confim触发的回调
bindcancel EventHandle 点击cancel以及蒙层触发的回调
 // modal.wxml <modal title="标题" confirm-text="confirm" cancel-text="cancel" hidden="{{modalHidden}}" bindconfirm="modalChange" bindcancel="modalChange"> // 这是对话框的内容。 </modal> <modal hidden="{{modalHidden2}}" no-cancel bindconfirm="modalChange2"> <view> 内容可以插入节点 </view> </modal> <view > <button type="default" bindtap="modalTap">点击弹出modal</button> <button type="default" bindtap="modalTap2">点击弹出modal2</button> </view> // modal.js Page({ data: { modalHidden: true, modalHidden2: true }, modalTap: function { this.setData({ modalHidden: false }) }, modalChange: function { this.setData({ modalHidden: true }) }, modalTap2: function { this.setData({ modalHidden2: false }) }, modalChange2: function { this.setData({ modalHidden2: true }) }, })

4. input

输入框。

属性名 类型 默认值 说明 最低版本
value String 输入框的初始内容
type String "text" input 的类型
password Boolean false 是否是密码类型
placeholder String 输入框为空时占位符
placeholder-style String 指定 placeholder 的样式
placeholder-class String "input-placeholder" 指定 placeholder 的样式类
disabled Boolean false 是否禁用
maxlength Number 140 最大输入长度,设置为 -1 的时候不限制最大长度
cursor-spacing Number 0 指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
auto-focus Boolean false (即将废弃,请直接使用 focus )自动聚焦,拉起键盘
focus Boolean false 获取焦点
confirm-type String "done" 设置键盘右下角按钮的文字 1.1.0
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
bindinput EventHandle 当键盘输入时,触发input事件,event.detail = {value, cursor},处理函数可以直接 return 一个字符串,将替换输入框的内容。
bindfocus EventHandle 输入框聚焦时触发,event.detail = { value, height },height 参数在基础库 1.9.90 起支持
bindblur EventHandle 输入框失去焦点时触发,event.detail = {value: value}
bindconfirm EventHandle 点击完成按钮时触发,event.detail = {value: value}

4.progress

进度条。

属性名 类型 默认值 说明
percent Float 百分比0~100
show-info Boolean false 在进度条右侧显示百分比
stroke-width Number 6 进度条线的宽度,单位px
color Color #09BB07 进度条颜色 (请使用 activeColor)
activeColor Color 已选择的进度条的颜色
backgroundColor Color 未选择的进度条的颜色
active Boolean false 进度条从左往右的动画
active-mode String backwards backwards: 动画从头播;forwards:动画从上次结束点接着播

3.form

表单,将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。

当点击 <form/> 表单中 formType 为 submit 的 <button/> 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。

属性名 类型 说明
report-submit Boolean 是否返回 formId 用于发送模板消息
bindsubmit EventHandle 携带 form 中的数据触发 submit 事件,event.detail = {value : {'name': 'value'} , formId: ''}
bindreset EventHandle 表单重置时会触发 reset 事件

3.swiper

滑块视图容器组件的属性

属性名 类型 默认值 说明
indicator-dots Boolean false 是否显示面板指示点
indicator-color Color rgba(0, 0, 0, .3) 指示点颜色
indicator-active-color Color #000000 当前选中的指示点颜色
autoplay Boolean false 是否自动切换
current Number 0 当前所在滑块的 index
current-item-id String "" 当前所在滑块的 item-id ,不能与 current 被同时指定
interval Number 5000 自动切换时间间隔
duration Number 500 滑动动画时长
circular Boolean false 是否采用衔接滑动
vertical Boolean false 滑动方向是否为纵向
previous-margin String "0px" 前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值
next-margin String "0px" 后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值
display-multiple-items Number 1 同时显示的滑块数量
skip-hidden-item-layout Boolean false 是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息
bindchange EventHandle current 改变时会触发 change 事件,event.detail = {current: current, source: source}
bindanimationfinish EventHandle 动画结束时会触发 animationfinish 事件,event.detail 同上

注意其中只可放置<swiper-item/>组件,否则会导致未定义的行为.swiper-itemswiper-item为滑块项组件,仅可放置在<swiper/>组件中,宽高自动设置为100%。示例代码如下:

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" width="355" height="150"/> </swiper-item> </block></swiper>

■如果在 bindchange 的事件回调函数中使用 setData 改变 current 值,则有可能导致 setData 被不停地调用,因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。

5.live-player

实时音视频播放。

属性名 类型 默认值 说明
src String 音视频地址。目前仅支持 flv, rtmp 格式
mode String live live,RTC
autoplay Boolean false 自动播放
muted Boolean false 是否静音
orientation String vertical 画面方向,可选值有 vertical,horizontal
object-fit String contain 填充模式,可选值有 contain,fillCrop
background-mute Boolean false 进入后台时是否静音
min-cache Number 1 最小缓冲区,单位s
max-cache Number 3 最大缓冲区,单位s
bindstatechange EventHandle 播放状态变化事件,detail = {code}
bindfullscreenchange EventHandle 全屏变化事件,detail = {direction, fullScreen}
bindnetstatus EventHandle 网络状态通知,detail = {info}

4.loading

loading为加载提示组件。示例代码如下:

// loading.wxml <view > <loading hidden="{{hidden}}" bindchange="loadingChange"> 加载中... </loading> <button type="default" bindtap="loadingTap">点击弹出loading</button> </view> // loading.js Page({ data: { hidden: true }, loadingChange: function () { this.setData({ hidden: true }) }, loadingTap: function () { this.setData({ hidden: false }) var that = this setTimeout(function () { that.setData({ hidden: true }) }, 1500) } })

页面链接。

属性名 类型 默认值 说明 最低版本
url String 应用内的跳转链接
open-type String navigate 跳转方式
delta Number 当 open-type 为 'navigateBack' 时有效,表示回退的层数
hover-class String navigator-hover 指定点击时的样式类,当hover-时,没有点击态效果
hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态 1.5.0
hover-start-time Number 50 按住后多久出现点击态,单位毫秒
hover-stay-time Number 600 手指松开后点击态保留时间,单位毫秒

页面路由的三个API方法:■wx.navigateTo:保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。■wx.redirectTo:关闭当前页面,跳转到应用内的某个页面。■wx.navigateBack():关闭当前页面,回退至前一页面。

11.textarea

多行输入框。

属性名 类型 默认值 说明 最低版本
value String 输入框的内容
placeholder String 输入框为空时占位符
placeholder-style String 指定 placeholder 的样式
placeholder-class String textarea-placeholder 指定 placeholder 的样式类
disabled Boolean false 是否禁用
maxlength Number 140 最大输入长度,设置为 -1 的时候不限制最大长度
auto-focus Boolean false 自动聚焦,拉起键盘。
focus Boolean false 获取焦点
auto-height Boolean false 是否自动增高,设置auto-height时,style.height不生效
fixed Boolean false 如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true
cursor-spacing Number 0 指定光标与键盘的距离,单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
cursor Number 指定focus时的光标位置 1.5.0
show-confirm-bar Boolean true 是否显示键盘上方带有”完成“按钮那一栏 1.6.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
bindfocus EventHandle 输入框聚焦时触发,event.detail = { value, height },height 参数在基础库 1.9.90 起支持
bindblur EventHandle 输入框失去焦点时触发,event.detail = {value, cursor}
bindlinechange EventHandle 输入框行数变化时调用,event.detail = {height: 0, heightRpx: 0, lineCount: 0}
bindinput EventHandle 当键盘输入时,触发 input 事件,event.detail = {value, cursor},**bindinput 处理函数的返回值并不会反映到 textarea 上 **
bindconfirm EventHandle 点击完成时, 触发 confirm 事件,event.detail = {value: value}

6.live-pusher

实时音视频录制。

属性名 类型 默认值 说明 最低版本
url String 推流地址。目前仅支持 flv, rtmp 格式
mode String RTC SD, HD, FHD, RTC
autopush Boolean false 自动推流
muted Boolean false 是否静音
enable-camera Boolean true 开启摄像头
auto-focus Boolean true 自动聚集
orientation String vertical vertical,horizontal
beauty Number 0 美颜
whiteness Number 0 美白
aspect String 9:16 宽高比,可选值有 3:4, 9:16
min-bitrate Number 200 最小码率
max-bitrate Number 1000 最大码率
waiting-image String 进入后台时推流的等待画面
waiting-image-md5 String 等待画面资源的MD5值
background-mute Boolean false 进入后台时是否静音
bindstatechange EventHandle 状态变化事件,detail = {code}
bindnetstatus EventHandle 网络状态通知,detail = {info} 1.9.0
binderror EventHandle 渲染错误事件,detail = {errMsg, errCode}

地图。

属性名 类型 默认值 说明 最低版本
longitude Number 中心经度
latitude Number 中心纬度
scale Number 16 缩放级别,取值范围为5-18
markers Array 标记点
covers Array 即将移除,请使用 markers
polyline Array 路线
circles Array
controls Array 控件
include-points Array 缩放视野以包含所有给定的坐标点
show-location Boolean 显示带有方向的当前定位点
bindmarkertap EventHandle 点击标记点时触发
bindcallouttap EventHandle 点击标记点对应的气泡时触发 1.2.0
bindcontroltap EventHandle 点击控件时触发
bindregionchange EventHandle 视野发生变化时触发
bindtap EventHandle 点击地图时触发
bindupdated EventHandle 在地图渲染更新完成时触发 1.6.0

注意: covers 属性即将移除,请使用 markers 替代

canvas画布。

属性名 类型 默认值 说明
canvas-id String canvas 组件的唯一标识符
disable-scroll Boolean false 当在 canvas 中移动时且有绑定手势事件时,禁止屏幕滚动以及下拉刷新
bindtouchstart EventHandle 手指触摸动作开始
bindtouchmove EventHandle 手指触摸后移动
bindtouchend EventHandle 手指触摸动作结束
bindtouchcancel EventHandle 手指触摸动作被打断,如来电提醒,弹窗
bindlongtap EventHandle 手指长按 500ms 之后触发,触发了长按事件后进行移动不会触发屏幕的滚动
binderror EventHandle 当发生错误时触发 error 事件,detail = {errMsg: 'something wrong'}

5.label

用来改进表单组件的可用性,使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。

for优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。

目前可以绑定的控件有:<button/>, <checkbox/>, <radio/>, <switch/>。

属性名 类型 说明
for String 绑定控件的 id

2.text

文本

属性名 类型 默认值 说明
selectable Boolean false 文本是否可选
space String false 显示连续空格
decode Boolean false 是否解码

■decode可以解析的有 < > & ' ■各个操作系统的空格标准并不一致。■<text/> 组件内只支持 <text/> 嵌套。■除了文本节点以外的其他节点都无法长按选中。

视图容器组件包括view、scroll-view、swiper及swiper-item,主要用于控制视图样式与内容展现。

1.audio

音频。

属性名 类型 默认值 说明
id String audio 组件的唯一标识符
src String 要播放音频的资源地址
loop Boolean false 是否循环播放
controls Boolean false 是 否显示默认控件
poster String 默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效
name String 未知音频 默认控件上的音频名字,如果 controls 属性值为 false 则设置 name 无效
author String 未知作者 默认控件上的作者名字,如果 controls 属性值为 false 则设置 author 无效
binderror EventHandle 当发生错误时触发 error 事件,detail = {errMsg: MediaError.code}
bindplay EventHandle 当开始/继续播放时触发play事件
bindpause EventHandle 当暂停播放时触发 pause 事件
bindtimeupdate EventHandle 当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration}
bindended EventHandle 当播放到末尾时触发 ended 事件

8.radio

单选项目

属性名 类型 默认值 说明
value String <radio/> 标识。当该<radio/> 选中时,<radio-group/> 的 change 事件会携带<radio/>的value
checked Boolean false 当前是否选中
disabled Boolean false 是否禁用
color Color radio的颜色,同css的color

radio-group单项选择器,内部由多个<radio/>组成

属性名 类型 说明
bindchange EventHandle <radio-group/> 中的选中项发生变化时触发 change 事件,event.detail = {value: 选中项radio的value}

9.slider

滑动选择器。

属性名 类型 默认值 说明 最低版本
min Number 0 最小值
max Number 100 最大值
step Number 1 步长,取值必须大于 0,并且可被(max - min)整除
disabled Boolean false 是否禁用
value Number 0 当前取值
color Color #e9e9e9 背景条的颜色(请使用 backgroundColor)
selected-color Color #1aad19 已选择的颜色(请使用 activeColor)
activeColor Color #1aad19 已选择的颜色
backgroundColor Color #e9e9e9 背景条的颜色
block-size Number 28 滑块的大小,取值范围为 12 - 28 1.9.0
block-color Color #ffffff 滑块的颜色 1.9.0
show-value Boolean false 是否显示当前 value
bindchange EventHandle 完成一次拖动后触发的事件,event.detail = {value: value}
bindchanging EventHandle 拖动过程中触发的事件,event.detail = {value: value} 1.7.0

2.checkbox

多选项目。

属性名 类型 默认值 说明
value String <checkbox/>标识,选中时触发<checkbox-group/>的 change 事件,并携带 <checkbox/> 的 value
disabled Boolean false 是否禁用
checked Boolean false 当 前是否选中,可用来设置默认选中
color Color checkbox的颜色,同css的color

checkbox-group多项选择器,内部由多个checkbox组成。

属性名 |类型 |说明bindchange |EventHandle |<checkbox-group/>中选中项发生改变是触发 change 事件,detail = {value:[选中的checkbox的value的数组]}

<checkbox-group bindchange="checkboxChange"> <label wx:for="{{items}}"> <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}} </label></checkbox-group>Page({ data: { items: [ {name: 'USA', value: '美国'}, {name: 'CHN', value: '中国', checked: 'true'}, {name: 'BRA', value: '巴西'}, {name: 'JPN', value: '日本'}, {name: 'ENG', value: '英国'}, {name: 'TUR', value: '法国'}, ] }, checkboxChange: function { console.log('checkbox发生change事件,携带value值为:', e.detail.value) }})

2.scroll-view

可滚动视图区域组件的属性

属性名 类型 默认值 说明
scroll-x Bollean false 允许横向滚动
scroll-y Bollean false 允许纵向滚动
upper-threshold Number 50 距顶部/左边多远时,触发scrolltoupper事件
lower-threshold Number 50 距底部/右边多远时,触发scrolltolower事件
scroll-top Number 设置竖向滚动条位置
scroll-left Number 设置横向滚动条位置
scroll-into-view String 值应为某个子元素id,则滚动到该元素,元素顶部对其滚动区域顶部
bindscrolltoupper EventHandle 滚动到顶部/左边,触发scrolltoupper事件
bindscrolltolower EventHandle 滚动到底部/右边,触发scrolltolower事件
bindscroll EventHandle 滚动时触发,event.detail={scrollLeft,scrollTop,scrollHeight,scrollWidth,dataX,dataY}

使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过WXSS设置height。

<scroll-view scroll-y style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}"> <view ></view> <view ></view> <view ></view> <view ></view> </scroll-view>

注意:■请勿在 scroll-view 中使用 textarea、map、canvas、video 组件■scroll-into-view 的优先级高于 scroll-top■ 在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动,是无法触发 onPullDownRefresh■ 若要使用下拉刷新,请使用页面的滚动,而不是 scroll-view ,这样也能通过点击顶部状态栏回到页面顶部

3.rich-text

富文本。

属性 类型 默认值 说明
nodes Array / String [] 节点列表 / HTML String

nodes 属性推荐使用 Array 类型,由于组件会将 String 类型转换为 Array 类型,因而性能会有所下降

nodes现支持两种节点,通过type来区分,分别是元素节点和文本节点,默认是元素节点,在富文本区域里显示的HTML节点

■nodes 不推荐使用 String 类型,性能会有所下降。■ rich-text 组件内屏蔽所有节点的事件。■attrs 属性不支持 id ,支持 class 。■ name 属性大小写不敏感。■如果使用了不受信任的HTML节点,该节点及其所有子节点将会被移除。■ img 标签仅支持网络图片。■如果在自定义组件中使用 rich-text 组件,那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。

1.View

View是最常用的视图容器组件,相当于HTML页面的<div>标签。view组件具有如下属性:

属性名 类型 默认值 说明
hover Boolean false 是否启用点击状态
hover-class String 指定按下去的样式类,当hover-时,没有点击效果
hover-start-time Number 50 按住后多久出现点击状态,单位为ms
hover-stay-time Number 400 手指松开后点击状态保留时间,单位为ms
  • flex-direction:row/column 控件沿主轴排列方向

3. video

视频。

属性名 类型 默认值 说明 最低版本
src String 要播放视频的资源地址
initial-time Number 指定视频初始播放位置 1.6.0
duration Number 指定视频时长 1.1.0
controls Boolean true 是否显示默认播放控件(播放/暂停按钮、播放进度、时间)
danmu-list Object Array 弹幕列表
danmu-btn Boolean false 是否显示弹幕按钮,只在初始化时有效,不能动态变更
enable-danmu Boolean false 是否展示弹幕,只在初始化时有效,不能动态变更
autoplay Boolean false 是否自动播放
loop Boolean false 是否循环播放 1.4.0
muted Boolean false 是否静音播放 1.4.0
page-gesture Boolean false 在非全屏模式下,是否开启亮度与音量调节手势 1.6.0
direction Number 设置全屏时视频的方向,不指定则根据宽高比自动判断。有效值为 0, 90, -90 1.7.0
show-progress Boolean true 若不设置,宽度大于240时才会显示 1.9.0
show-fullscreen-btn Boolean true 是否显示全屏按钮 1.9.0
show-play-btn Boolean true 是否显示视频底部控制栏的播放按钮 1.9.0
show-center-play-btn Boolean true 是否显示视频中间的播放按钮 1.9.0
enable-progress-gesture Boolean true 是否开启控制进度的手势 1.9.0
objectFit String contain 当视频大小与 video 容器大小不一致时,视频的表现形式。contain:包含,fill:填充,cover:覆盖
poster String 视频封面的图片网络资源地址,如果 controls 属性值为 false 则设置 poster 无效
bindplay EventHandle 当开始/继续播放时触发play事件
bindpause EventHandle 当暂停播放时触发 pause 事件
bindended EventHandle 当播放到末尾时触发 ended 事件
bindtimeupdate EventHandle 播放进度变化时触发,event.detail = {currentTime, duration} 。触发频率 250ms 一次
bindfullscreenchange EventHandle 当视频进入和退出全屏是触发,event.detail = {fullScreen, direction},direction取为 vertical 或 horizontal 1.4.0
bindwaiting EventHandle 视频出现缓冲时触发 1.7.0
binderror EventHandle 视频播放出错时触发 1.7.0

4.camera

系统相机。

属性名 类型 默认值 说明
device-position String back 前置或后置,值为front, back
flash String auto 闪光灯,值为auto, on, off
bindstop EventHandle 摄像头在非正常终止时触发,如退出后台等情况
binderror EventHandle 用户不允许使用摄像头时触发

本文由澳门威斯尼人平台登录发布于服务器&运维,转载请注明出处:sheet组件详细介绍_JavaScript_脚本之家,sheet底部菜单详解_JavaScript_脚本之家

相关阅读