交互反馈
wx.showToast(Object)
显示消息提示框,Object参数的属性如下:
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
title | string | 是 | 提示的内容 | ||
icon | string | 'success' | 否 | 图标 | |
image | string | 否 | 自定义图标的本地路径,image 的优先级高于 icon | 1.1.0 | |
duration | number | 1500 | 否 | 提示的延迟时间 | |
mask | boolean | false | 否 | 是否显示透明蒙层,防止触摸穿透 | |
success | function | 否 | 接口调用成功的回调函数 | ||
fail | function | 否 | 接口调用失败的回调函数 | ||
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码如下:
wx.showToast({
title: '操作成功',
icon:'success',
duration:2000
})
wx.hideToast()
隐藏消息提示框
示例代码如下:
wx.showToast({
title: '请稍等...',
icon: 'loading',
duration: 10000
});
setTimeout(function(){
//或请求返回时关闭toast
wx.hideToast();
},2000);
wx.showModal(Object)
显示模态弹窗,Object参数的属性如下:
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
title | string | 是 | 提示的标题 | |
content | string | 是 | 提示的内容 | |
showCancel | boolean | true | 否 | 是否显示取消按钮 |
cancelText | string | '取消' | 否 | 取消按钮的文字,最多 4 个字符 |
cancelColor | string | #000000 | 否 | 取消按钮的文字颜色,必须是 16 进制格式的颜色字符串 |
confirmText | string | '确定' | 否 | 确认按钮的文字,最多 4 个字符 |
confirmColor | string | #576B95 | 否 | 确认按钮的文字颜色,必须是 16 进制格式的颜色字符串 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码如下:
wx.showModal({
title: '标题',
content: '内容',
success:function(res){
if(!res.confirm){
return;//用户点击了取消,不做任何处理
}
console.log('用户点击了确定');//可以继续流程
}
});
wx.showActionSheet(Object)
显示操作菜单,Object参数的属性如下:
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
itemList | Array. |
是 | 按钮的文字数组,数组长度最大为 6 | |
itemColor | string | #000000 | 否 | 按钮的文字颜色 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码如下:
wx.showActionSheet({
itemList: ['缺货','配送时间错误','不想买了','其他'],//订单用户取消原因
success:function(res){
if(!res.cancle){
console.log(res.tapIndex);
}
}
});
wx.setNavigationBarTitle(Object)
动态设置当前页面的标题,Object参数属性如下:
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
title | string | 是 | 页面标题 | |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码如下:
wx.setNavigationBarTitle({
title: '新页面',
});
wx.showNavigationBarLoading()
在当前页面显示导航条加载动画
示例代码如下:
Page({
onShow:function(){
wx.showNavigationBarLoading();
}
});
wx.hideNavigationBarLoading()
隐藏导航条加载动画
示例代码如下:
Page({
onLaunch:function(){
wx.hideNavigationBarLoading();
}
});
wx.navigateTo(Object)
保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面,小程序中页面路径最多5层。Object参数属性如下:
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
url | string | 是 | 需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 'path?key=value&key2=value2' |
|
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码如下:
wx.navigateTo({
url: '../newpage?key1=value1&key2=value2',
});
page({
onLoad:function(option){
console.log(option.query);
}
});
wx.redirectTo(Object)
关闭当前页面,跳转到应用内的某个页面,Object参数属性如下:
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
url | string | 是 | 需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 'path?key=value&key2=value2' |
|
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码如下:
wx.redirectTo({
url: '../newpages?key1=value1&key2=value2',
});
wx.switchTab(Object)
跳转到tabBar页面,并关闭其他所有非tabBar页面。Object参数的属性如下:
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
url | string | 是 | 需要跳转的 tabBar 页面的路径(需在 app.json 的 tabBar 字段定义的页面),路径后不能带参数。 | |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码如下:
//app.json配置tabBar
{
"tabBar":{
"list":[{
"pagePath":"home",
"text":"首页"
},{
"pagePath":"other",
"text":"其他页面"
}]
}
}
wx.switchTab({
url: '/home',//必须是已注册tab
})
wx.navigateBack(Object)
关闭当前页面,返回上一页或多级页面。可以通过getCurrentPages()获取当前页面栈,以决定返回第几层。Obejct参数的属性为delta:返回的页面数,如果delta大于现有的页面数,则返回到首页,默认值为1
示例代码如下:
//向前返回3级
wx.navigateBack({delta:3});
wx.createAnimation(Object)
用于创建一个动画实例animation。可以调用动画实例的方法来描述动画,最后通过动画实例的export方法导出动画数据,传递给组件animation属性,每次调用exports方法会清掉之前的动画操作。Object参数属性如下:
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
duration | number | 400 | 否 | 动画持续时间,单位 ms |
timingFunction | string | 'linear' | 否 | 动画的效果 |
delay | number | 0 | 否 | 动画延迟时间,单位 ms |
transformOrigin | string | '50% 50% 0' | 否 |
示例代码如下:
var animation = wx.createAnimation({
transformOrigin:'0 0',//以左上角为中心点
duration:20000,
timingFunction:'ease-in'
});
创建实例后我们需要调用实例动画方法来描述动画,这些方法调用后会返回自身,支持链式调用的写法,动画描述方法按类型可以分为样式、旋转、缩放、偏移、倾斜、矩阵变形,下面分别介绍:
1)样式
方法 | 参数 | 说明 |
---|---|---|
opacity | value | 透明度,参数范围 0~1 |
backgroundColor | color | 颜色值 |
width | length | 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值 |
height | length | 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值 |
top | length | 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值 |
left | length | 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值 |
bottom | length | 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值 |
right | length | 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值 |
2)旋转
方法 | 参数 | 说明 |
---|---|---|
rotate | deg | deg的范围-180~180,从原点顺时针旋转一个deg角度 |
rotateX | deg | deg的范围-180~180,在X轴旋转一个deg角度 |
rotateY | deg | deg的范围-180~180,在Y轴旋转一个deg角度 |
rotateZ | deg | deg的范围-180~180,在Z轴旋转一个deg角度 |
rotate3d | (x,y,z,deg) | 同transform-function rotate3d |
3)缩放
方法 | 参数 | 说明 |
---|---|---|
scale | sx,[sy] | 一个参数时,表示在X轴、Y轴同时缩放sx倍数;两个参数时表示在X轴缩放sx倍数,在Y轴缩放sy倍数 |
scaleX | sx | 在X轴缩放sx倍数 |
scaleY | sy | 在Y轴缩放sy倍数 |
scaleZ | sz | 在Z轴缩放sy倍数 |
scale3d | (sx,sy,sz) | 在X轴缩放sx倍数,在Y轴缩放sy倍数,在Z轴缩放sz倍数 |
4)偏移
方法 | 参数 | 说明 |
---|---|---|
translate | tx,[ty] | 一个参数时,表示在X轴偏移tx,单位px;两个参数时,表示在X轴偏移tx,在Y轴偏移ty,单位px。 |
translateX | tx | 在X轴偏移tx,单位px |
translateY | ty | 在Y轴偏移tx,单位px |
translateZ | tz | 在Z轴偏移tx,单位px |
translate3d | (tx,ty,tz) | 在X轴偏移tx,在Y轴偏移ty,在Z轴偏移tz,单位px |
5)倾斜
方法 | 参数 | 说明 |
---|---|---|
skew | ax,[ay] | 参数范围-180~180;一个参数时,Y轴坐标不变,X轴坐标延顺时针倾斜ax度;两个参数时,分别在X轴倾斜ax度,在Y轴倾斜ay度 |
skewX | ax | 参数范围-180~180;Y轴坐标不变,X轴坐标延顺时针倾斜ax度 |
skewY | ay | 参数范围-180~180;X轴坐标不变,Y轴坐标延顺时针倾斜ay度 |
6)矩阵变形
方法 | 参数 | 说明 |
---|---|---|
matrix | (a,b,c,d,tx,ty) | 同transform-function matrix |
matrix3d | 同transform-function matrix3d |
2.动画队列
调用动画操作方法后要调用 step()
来表示一组动画完成,可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。step 可以传入一个跟 wx.createAnimation()
一样的配置参数用于指定当前组动画的配置。
实例代码如下:
Page({
data:{
animData:{}
},
//旋转并移动
rotateAndMove:function(){
var anim = wx.createAnimation({
duration:1000,
timingFunction:'ease'
});
//同时执行2个动画
anim.translateY('100px').rotate('720').step();
this.setData({
animData:anim.export()
});
},
//旋转后再移动
rotateThenMove:function(){
var anim = wx.createAnimation({
timingFunction:'ease'
});
//分布执行3个动画,通过step切割
anim.rotate('720').step({duration:500});
anim.translateY('100px').step({duration:500});
anim.translateX('100px').step({duration:500});
this.setData({
animData:anim.export()
});
}
});
执行结果如下:
wx.startPullDownRefresh(Object object)
开始下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致,参数如下:
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
wx.stopPullDownRefresh()
停止当前页面下拉刷新
示例代码如下:
Page({
//监听当前页面下拉刷新
onPullDownRefresh:function(){
//停止当前页面下拉刷新
wx.stopPullDownRefresh();
}
});