点击某二个swiper跳转页面,主要用于调整视图样

代码GitHub地址

视图容器组件包蕴view、scroll-view、swiper及swiper-item,首要用来调控视图样式与内容表现。

一.主导落实

<swiper> <swiper-item></swiper-item></swiper>
  • swiper: 父标签。个中只可放置<swiper-item/>组件,不然会变成未定义的行为。暗中认可width:百分之百;height:150px;
  • swiper-item: 子标签。 仅可停放在<swiper/>组件中,宽高自动安装为百分之百。

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 控件沿主轴排列方向

二. 属性表明

属性名 类型 默认值 说明
vertical Boolean false 滑动方向是否为纵向
indicator-dots Boolean false 是否显示面板指示点。横向显示:指示点在低中部。纵向显示:指示点在右中部。
indicator-color Color rgba(0, 0, 0, .3) 未选中的指示点颜色
indicator-active-color Color #000000 选中的指示点颜色
autoplay Boolean false 是否自动轮播
interval Number 5000ms 自动轮播的时间间隔
duration Number 500ms 轮播的动画时长
circular Boolean false 是否衔接循环滑动
previous-margin String "0px" 前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值
next-margin String "0px" 后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值
display-multiple-items Number 1 同时显示的swiper-item的数量
current Number 0 当前所在滑块的 index。 设置该属性,可以让swiper默认显示第几个元素,注意不要数组越界。
current-item-id String "" 当前所在滑块的 item-id ,不能与 current 被同时指定. 需要指定current-item-id为某一个swiper-item的item-id,不要指定到一个不存在的item-id
事件名 类型 说明
bindanimationfinish EventHandle 轮播动画结束时会触发 animationfinish 事件。即监听滑动到第几个item的事件。
bindchange EventHandle current 改变时会触发 change 事件

互相基本未有啥分别。

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 ,那样也能经过点击最上端场合栏回到页面顶端

四. 其他

点击事件 : 点击某一个swiper跳转页面

// wxml<swiper catchtap="onItemClick"> <swiper-item> <view data-postId="10"></view> </swiper-item></swiper>

// js onItemClick:function {// 获得到点击的swiper-item进行页面跳转处理,这里用模态展示效果 wx.showToast({ icon: "none", title: "postcontainer"> <swiper indicator-dots autoplay circular indicator-color='gray' indicator-active-color='red' interval="3000" bindchange="bindchange" bindanimationfinish="animationfinish" catchtap="onItemClick" current-item-> <swiper-item item-> <view data-postId="0">第0个</view> </swiper-item> <swiper-item item-> <view data-postId="1">第1页</view> </swiper-item> <swiper-item item-> <view data-postId="2">第2页</view> </swiper-item> </swiper></view>
  • wxss
.swiper { background-color: red; width: 50%; height: 200px;}.swiper-item { text-align: center; line-height: 200px;}.swiper-item-zero { background-color: yellow;}.swiper-item-one { background-color: orange;}.swiper-item-two { background-color: greenyellow;}
  • js
Page({ data: { index: 1 // 默认滑动到第几页 }, onLoad: function  { }, bindchange: function  { console.log("bindchange"); console.log; }, onItemClick: function  { wx.showToast({ icon: "none", title: "postanimationfinish"); console.log; }})

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/>组件中,宽高自动安装为百分百。示例代码如下:

<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 字段来决断是不是是由于客户触摸引起。

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 }})

5.cover-view

覆盖在原生组件之上的文书视图,可覆盖的原生组件包涵map、video、canvas、camera,只协助嵌套cover-view、cover-image。

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

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

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

2.text

文本

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

■decode能够剖判的有 < > & ' ■各样操作系统的空格标准并不雷同。■<text/> 组件内只支持<text/> 嵌套。■除了文本节点以外的任何节点都没办法儿长按选中。

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 生效。

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:动画从上次结束点接着播

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

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 |伊夫ntHandle |<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) }})

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 事件

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}

5.label

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

for优先级高于内部控件,内部有八个控件的时候暗许触发第三个控件。

日前能够绑定的控件有:<button/>, <checkbox/>, <radio/>, <switch/>。

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

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 时触发

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/>组件,别的节点不会来得。

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

10.switch

开关选择器。

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

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}

1.action-sheet

action-sheet是从显示屏底边现身的菜系表的零部件,具备bindchange属性,类型为伊芙ntHandle,点击背景或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) } })

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 }) }, })

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

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():关闭当前页面,回降至前一页面。

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 事件

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 不缩放图片,只显示图片的右下边区域

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 用户不允许使用摄像头时触发

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}

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'}

本文由2138acom太阳集团app发布于媒体资讯,转载请注明出处:点击某二个swiper跳转页面,主要用于调整视图样

相关阅读