# 界面
# 交互
# showToast
基础库 1.3.9 起,iOS SDK 2.1.23 起,Android SDK 2.1.38 起支持
showToast(Object object)
显示消息提示框。
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
title | string | 是 | 提示的内容 | |
icon | string | 'success' | 否 | 图标 |
image | string | 否 | 自定义图标的本地路径,image 的优先级高于 icon | |
duration | number | 1500 | 否 | 提示的显示时长 |
mask | boolean | false | 否 | 是否显示透明蒙层 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
object.icon 的合法值
值 | 说明 |
---|---|
success | 显示成功图标,此时 title 文本最多显示两行 |
loading | 显示加载图标,此时 title 文本最多显示两行 |
error | 显示失败图标,此时 title 文本最多显示两行 |
none | 不显示图标,此时 title 文本最多可显示两行 |
示例代码
ft.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
注意
ft.showLoading
和ft.showToast
同时只能显示一个ft.showToast
应与ft.hideToast
配对使用
# showModal
基础库 1.3.9 起,iOS SDK 2.1.23 起,Android SDK 2.1.38 起支持
showModal(Object object)
显示模态对话框
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
title | string | 否 | 提示的标题 | |
content | string | 否 | 提示的内容 | |
showCancel | boolean | true | 否 | 是否显示取消按钮 |
cancelText | string | '取消' | 否 | 取消按钮的文字 |
cancelColor | string | 浅色主题#191919;深色主题#A5A5A5 | 否 | 取消按钮的文字颜色,必须是 16 进制的颜色字符串 |
confirmText | string | '确定' | 否 | 确认按钮的文字 |
confirmColor | string | 浅色主题#409EFF;深色主题#368CE4 | 否 | 确认按钮的文字颜色,必须是 16 进制的颜色字符串 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
object.success 回调函数
参数
Object res
属性 | 类型 | 说明 |
---|---|---|
confirm | boolean | 为 true 时,表示用户点击了确定按钮 |
cancel | boolean | 为 true 时,表示用户点击了取消(用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭) |
示例代码
ft.showModal({
title: '提示',
content: '这是一个模态弹窗',
success(res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
# showLoading
基础库 1.3.9 起,iOS SDK 2.1.23 起,Android SDK 2.1.38 起支持
showLoading(Object object)
显示 loading 提示框。需主动调用 ft.hideLoading 才能关闭提示框。
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
title | string | 是 | 提示的内容 | |
mask | boolean | false | 否 | 是否显示透明蒙层 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码
ft.showLoading({
title: '加载中',
})
setTimeout(function () {
ft.hideLoading()
}, 2000)
注意
ft.showLoading
和ft.showToast
同时只能显示一个ft.showLoading
应与ft.hideLoading
配对使用
# showActionSheet
基础库 1.3.9 起,iOS SDK 2.1.23 起,Android SDK 2.1.38 起支持
showActionSheet(Object object)
显示操作菜单
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
itemList | Array.<string> | 是 | 按钮的文字数组,数组长度最大为 6 | |
itemColor | string | #000000 | 否 | 按钮的文字颜色 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
object.success 回调函数
参数
Object res
属性 | 类型 | 说明 |
---|---|---|
tapIndex | number | 用户点击的按钮序号,从上到下的顺序,从0开始 |
示例代码
ft.showActionSheet({
itemList: ['A', 'B', 'C'],
success(res) {
console.log(res.tapIndex)
},
fail(res) {
console.log(res.errMsg)
}
})
# hideToast
基础库 1.3.9 起,iOS SDK 2.1.23 起,Android SDK 2.1.38 起支持
hideToast(Object object)
隐藏消息提示框。
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
noConflict | boolean | false | 否 | 目前 toast 和 loading 相关接口可以相互混用,此参数可用于取消混用特性 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
# hideLoading
基础库 1.3.9 起,iOS SDK 2.1.23 起,Android SDK 2.1.38 起支持
hideLoading(Object object)
隐藏 loading 提示框。
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
noConflict | boolean | false | 否 | 目前 toast 和 loading 相关接口可以相互混用,此参数可用于取消混用特性 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
# enableAlertBeforeUnload
基础库2.11.5开始支持,iOS版本2.35.1,Android版本2.35.1
enableAlertBeforeUnload(Object object)
开启小程序页面返回询问对话框
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
message | string | 是 | 接口调用成功的回调函数 | |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
# disableAlertBeforeUnload
基础库2.11.5开始支持,iOS版本2.35.1,Android版本2.35.1
disableAlertBeforeUnload(Object object)
关闭小程序页面返回询问对话框
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
# 导航栏
# showNavigationBarLoading
基础库 1.3.9 起,iOS SDK 2.1.23 起,Android SDK 2.1.38 起支持
showNavigationBarLoading(Object object)
在当前页面显示导航条加载动画。
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
# setNavigationBarTitle
基础库 1.3.9 起,iOS SDK 2.1.23 起,Android SDK 2.1.38 起支持
setNavigationBarTitle(Object object)
动态设置当前页面的标题。
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
title | string | 是 | 页面标题 | |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码
ft.setNavigationBarTitle({
title: '页面标题'
})
# setNavigationBarColor
基础库 1.3.9 起,iOS SDK 2.1.23 起,Android SDK 2.1.38 起支持
setNavigationBarColor(Object object)
设置页面导航条颜色。
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
frontColor | string | 是 | 前景颜色值,包括按钮、标题、状态栏的颜色,仅支持 #ffffff 和 #000000 | |
backgroundColor | string | 是 | 背景颜色值,有效值为十六进制颜色 | |
animation | Object | 否 | 动画效果 | |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
object.animation 的结构
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
duration | number | 0 | 否 | 动画变化时间,单位 ms |
timingFunc | string | 'linear' | 否 | 动画变化方式 |
object.animation.timingFunc 的合法值
值 | 说明 |
---|---|
'linear' | 动画从头到尾的速度是相同的 |
'easeIn' | 动画以低速开始 |
'easeOut' | 动画以低速结束 |
'easeInOut' | 动画以低速开始和结束 |
示例代码
ft.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#ff0000',
animation: {
duration: 400,
timingFunc: 'easeIn'
}
})
# hideNavigationBarLoading
基础库 1.3.9 起,iOS SDK 2.1.23 起,Android SDK 2.1.38 起支持
hideNavigationBarLoading(Object object)
在当前页面隐藏导航条加载动画。
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
# 背景
# setBackgroundTextStyle
基础库 1.3.9 起,iOS SDK 2.1.23 起,Android SDK 2.1.38 起支持
ft.setBackgroundTextStyle(Object object)
动态设置下拉背景字体、loading 图的样式
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
textStyle | string | 是 | 下拉背景字体、loading 图的样式。 | |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
object.textStyle 的合法值
值 | 说明 |
---|---|
dark | dark 样式 |
light | light 样式 |
示例代码
ft.setBackgroundTextStyle({
textStyle: 'dark' // 下拉背景字体、loading 图的样式为dark
})
# setBackgroundColor
基础库 1.3.9 起,iOS SDK 2.1.23 起,Android SDK 2.1.38 起支持
ft.setBackgroundColor(Object object)
动态设置窗口的背景色
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
backgroundColor | string | 否 | 窗口的背景色,必须为十六进制颜色值 | |
backgroundColorTop | string | 否 | 顶部窗口的背景色,必须为十六进制颜色值,仅 iOS 支持 | |
backgroundColorBottom | string | 否 | 底部窗口的背景色,必须为十六进制颜色值,仅 iOS 支持 | |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码
ft.setBackgroundColor({
backgroundColor: '#ffffff', // 窗口的背景色为白色
})
ft.setBackgroundColor({
backgroundColorTop: '#ffffff', // 顶部窗口的背景色为白色
backgroundColorBottom: '#ffffff', // 底部窗口的背景色为白色
})
# Tab Bar
# showTabBarRedDot
ft.showTabBarRedDot(Object object)
显示 tabBar 某一项的右上角的红点
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
index | number | 是 | tabBar 的哪一项,从左边算起 | |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
# showTabBar
ft.showTabBar(Object object)
显示 tabBar
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
animation | boolean | false | 否 | 是否需要动画效果 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
# setTabBarStyle
ft.setTabBarStyle(Object object)
动态设置 tabBar 的整体样式
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
color | string | 否 | tab 上的文字默认颜色,HexColor | |
selectedColor | string | 否 | tab 上的文字选中时的颜色,HexColor | |
backgroundColor | string | 否 | tab 的背景色,HexColor | |
borderStyle | string | 否 | tabBar上边框的颜色, 仅支持 black/white | |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码
ft.setTabBarStyle({
color: '#FF0000',
selectedColor: '#00FF00',
backgroundColor: '#0000FF',
borderStyle: 'white'
})
# setTabBarItem
ft.setTabBarItem(Object object)
动态设置 tabBar 某一项的内容,2.7.0
起图片支持临时文件和网络文件。
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
index | number | 是 | tabBar 的哪一项,从左边算起 | |
text | string | 否 | tab 上的按钮文字 | |
iconPath | string | 否 | 图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效 | |
selectedIconPath | string | 否 | 选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效 | |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码
ft.setTabBarItem({
index: 0,
text: 'text',
iconPath: '/path/to/iconPath',
selectedIconPath: '/path/to/selectedIconPath'
})
# setTabBarBadge
基础库 1.3.9 起,iOS SDK 2.1.23 起,Android SDK 2.1.38 起支持
为 tabBar 某一项的右上角添加文本
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
index | number | 否 | tabBar 的哪一项,从左边算起 | |
text | string | 否 | 显示的文本,超过 4 个字符则显示成 ... | |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码
ft.setTabBarBadge({
index: 0,
text: '1'
})
# removeTabBarBadge
基础库 1.3.9 起,iOS SDK 2.1.23 起,Android SDK 2.1.38 起支持
移除 tabBar 某一项右上角的文本
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
index | number | 否 | tabBar 的哪一项,从左边算起 | |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
# hideTabBarRedDot
ft.hideTabBarRedDot(Object object)
隐藏 tabBar 某一项的右上角的红点
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
index | number | 是 | tabBar 的哪一项,从左边算起 | |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
# hideTabBar
ft.hideTabBar(Object object)
隐藏 tabBar
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
animation | boolean | false | 否 | 是否需要动画效果 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
# 字体
# loadFontFace
ft.loadFontFace(Object object)
动态加载网络字体,文件地址需为下载类型。'2.10.0'起支持全局生效,需在 app.js
中调用。
注意:
- 字体文件返回的 contet-type 参考 font (opens new window),格式不正确时会解析失败。
- 字体链接必须是https(ios不支持http)
- 字体链接必须开启cors支持 *
- 工具里提示 Faild to load font可以忽略
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
global | boolean | false | 否 | 是否全局生效 | 2.10.0 |
family | string | 是 | 定义的字体名称 | ||
source | string | 是 | 字体资源的地址。建议格式为 TTF 和 WOFF,WOFF2 在低版本的iOS上会不兼容。 | ||
desc | Object | 否 | 可选的字体描述符 | ||
scopes | Array | 否 | 字体作用范围,可选值为 webview / native,默认 webview,设置 native 可在 Canvas 2D 下使用 | ||
success | function | 否 | 接口调用成功的回调函数 | ||
fail | function | 否 | 接口调用失败的回调函数 | ||
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
object.desc 的结构
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
style | string | 'normal' | 否 | 字体样式,可选值为 normal / italic / oblique |
weight | string | 'normal' | 否 | 字体粗细,可选值为 normal / bold / 100 / 200../ 900 |
variant | string | 'normal' | 否 | 设置小型大写字母的字体显示文本,可选值为 normal / small-caps / inherit |
object.success 回调函数
参数
Object res
属性 | 类型 | 说明 |
---|---|---|
status | string | 加载字体结果 |
object.fail 回调函数
参数
Object res
属性 | 类型 | 说明 |
---|---|---|
status | string | 加载字体结果 |
object.complete 回调函数
参数
Object res
属性 | 类型 | 说明 |
---|---|---|
status | string | 加载字体结果 |
示例代码
ft.loadFontFace({
family: 'Bitstream Vera Serif Bold',
source: 'url("https://sungd.github.io/Pacifico.ttf")',
success: console.log
})
# 下拉刷新
# startPullDownRefresh
基础库 1.3.9 起,iOS SDK 2.1.23 起,Android SDK 2.1.38 起支持
startPullDownRefresh(Object object)
开始下拉刷新。调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码
ft.startPullDownRefresh()
# stopPullDownRefresh
基础库 1.3.9 起,iOS SDK 2.1.23 起,Android SDK 2.1.38 起支持
stopPullDownRefresh(Object object)
停止当前页面下拉刷新。
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码
Page({
onPullDownRefresh() {
ft.stopPullDownRefresh()
}
})
# 滚动
# pageScrollTo
ft.pageScrollTo(Object object)
将页面滚动到目标位置,支持选择器和滚动距离两种方式定位
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
scrollTop | number | 否 | 滚动到页面的目标位置,单位 px | ||
duration | number | 300 | 否 | 滚动动画的时长,单位 ms | |
selector | string | 否 | 选择器 | 2.7.3 | |
offsetTop | number | 否 | 偏移距离,需要和 selector 参数搭配使用,可以滚动到 selector 加偏移距离的位置,单位 px | 3.0.8 | |
success | function | 否 | 接口调用成功的回调函数 | ||
fail | function | 否 | 接口调用失败的回调函数 | ||
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
selector 语法
selector类似于 CSS 的选择器,但仅支持下列语法。
- ID选择器:#the-id
- class选择器(可以连续指定多个):.a-class.another-class
- 子元素选择器:.the-parent > .the-child
- 后代选择器:.the-ancestor .the-descendant
- 跨自定义组件的后代选择器:.the-ancestor >>> .the-descendant
- 多选择器的并集:#a-node, .some-other-nodes
示例代码
ft.pageScrollTo({
scrollTop: 0,
duration: 300
})
# ScrollViewContext
基础库 3.0.45 开始支持
scroll-view 增强实例
示例代码
// 获取 ScrollViewContext
ft.createSelectorQuery()
.select('#scroll-view')
.node()
.exec((res) => {
const scrollViewContext = res[0].node;
})
# ScrollViewContext 属性
属性 | 类型 | 说明 | 最低版本 |
---|---|---|---|
scrollEnabled | boolean | 滚动开关 | 3.0.45 |
示例代码
ft.createSelectorQuery()
.select('#scroll-view')
.node()
.exec((res) => {
const scrollViewContext = res[0].node;
scrollViewContext.scrollEnabled = false
})
# ScrollViewContext 方法
# scrollIntoView
scrollIntoView(String selector)
滚动至指定位置
参数
String selector
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
selector | string | 是 | 元素选择器,目标元素必须是 scroll-view 的子元素 | 3.0.45 |
示例代码
ft.createSelectorQuery()
.select('#scroll-view')
.node()
.exec((res) => {
const scrollViewContext = res[0].node;
scrollViewContext.scrollIntoView('.some-class');
})
# scrollTo
scrollTo(Object object)
滚动至指定位置
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
top | number | 否 | 顶部距离 | 3.0.45 | |
left | number | 否 | 左边界距离 | 3.0.45 | |
velocity | number | 否 | 初始速度(未支持) | 3.0.45 | |
duration | number | 300 | 否 | 滚动动画时长 | 3.0.45 |
animated | boolean | false | 否 | 是否启用滚动动画 | 3.0.45 |
示例代码
ft.createSelectorQuery()
.select('#scroll-view')
.node()
.exec((res) => {
const scrollViewContext = res[0].node;
scrollViewContext.scrollTo({
top: 0,
duration: 400,
animated: false
});
})
# 动画
# createAnimation
Animation ft.createAnimation(Object object)
创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
duration | number | 400 | 否 | 动画持续时间,单位 ms |
timingFunction | string | 'linear' | 否 | 动画的效果 |
delay | number | 0 | 否 | 动画延迟时间,单位 ms |
transformOrigin | string | '50% 50% 0' | 否 |
timingFunction 的合法值
值 | 说明 | 最低版本 |
---|---|---|
'linear' | 动画从头到尾的速度是相同的 | |
'ease' | 动画以低速开始,然后加快,在结束前变慢 | |
'ease-in' | 动画以低速开始 | |
'ease-in-out' | 动画以低速开始和结束 | |
'ease-out' | 动画以低速结束 | |
'step-start' | 动画第一帧就跳至结束状态直到结束 | |
'step-end' | 动画一直保持开始状态,最后一帧跳到结束状态 |
返回值
Animation
# Animation
动画对象
方法
Array.<Object> Animation.export()
导出动画队列。export 方法每次调用后会清掉之前的动画操作。Animation Animation.step(Object object)
表示一组动画完成。可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。Animation Animation.matrix()
同 transform-function matrixAnimation Animation.matrix3d()
同 transform-function matrix3dAnimation Animation.rotate(number angle)
从原点顺时针旋转一个角度Animation Animation.rotate3d(number x, number y, number z, number angle)
从 固定 轴顺时针旋转一个角度Animation Animation.rotateX(number angle)
从 X 轴顺时针旋转一个角度Animation Animation.rotateY(number angle)
从 Y 轴顺时针旋转一个角度Animation Animation.rotateZ(number angle)
从 Z 轴顺时针旋转一个角度Animation Animation.scale(number sx, number sy)
缩放Animation Animation.scale3d(number sx, number sy, number sz)
缩放Animation Animation.scaleX(number scale)
缩放 X 轴Animation Animation.scaleY(number scale)
缩放 Y 轴Animation Animation.scaleZ(number scale)
缩放 Z 轴Animation Animation.skew(number ax, number ay)
对 X、Y 轴坐标进行倾斜Animation Animation.skewX(number angle)
对 X 轴坐标进行倾斜Animation Animation.skewY(number angle)
对 Y 轴坐标进行倾斜Animation Animation.translate(number tx, number ty)
平移变换Animation Animation.translate3d(number tx, number ty, number tz)
对 xyz 坐标进行平移变换Animation Animation.translateX(number translation)
对 X 轴平移Animation Animation.translateY(number translation)
对 Y 轴平移Animation Animation.translateZ(number translation)
对 Z 轴平移Animation Animation.opacity(number value)
设置透明度Animation Animation.backgroundColor(string value)
设置背景色Animation Animation.width(number|string value)
设置宽度Animation Animation.height(number|string value)
设置高度Animation Animation.left(number|string value)
设置 left 值Animation Animation.right(number|string value)
设置 right 值Animation Animation.top(number|string value)
设置 top 值Animation Animation.bottom(number|string value)
设置 bottom 值
# 自定义组件
# nextTick
ft.nextTick(function callback)
延迟一部分操作到下一个时间片再执行。(类似于 setTimeout)
参数
function callback
说明
因为自定义组件中的 setData 和 triggerEvent 等接口本身是同步的操作,当这几个接口被连续调用时,都是在一个同步流程中执行完的,因此若逻辑不当可能会导致出错。
一个极端的案例:当父组件的 setData 引发了子组件的 triggerEvent,进而使得父组件又进行了一次 setData,期间有通过 ft:if 语句对子组件进行卸载,就有可能引发奇怪的错误,所以对于不需要在一个同步流程内完成的逻辑,可以使用此接口延迟到下一个时间片再执行。
示例代码
Component({
doSth() {
this.setData({ number: 1 }) // 直接在当前同步流程中执行
ft.nextTick(() => {
this.setData({ number: 3 }) // 在当前同步流程结束后,下一个时间片执行
})
this.setData({ number: 2 }) // 直接在当前同步流程中执行
}
})
# 菜单
# getMenuButtonBoundingClientRect
基础库 1.3.9 起,iOS SDK 2.1.23 起,Android SDK 2.1.38 起支持
获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点。
属性 | 类型 | 说明 |
---|---|---|
width | number | 宽度,单位:px |
height | number | 高度,单位:px |
top | number | 上边界坐标,单位:px |
right | number | 右边界坐标,单位:px |
bottom | number | 下边界坐标,单位:px |
left | number | 左边界坐标,单位:px |
# 窗口
# onWindowResize
监听窗口尺寸变化事件
参数
function listener
窗口尺寸变化事件的监听函数
返回值 Object res
属性 | 类型 | 说明 |
---|---|---|
size | Object |
size
属性 | 类型 | 说明 |
---|---|---|
windowWidth | number | 变化后的窗口宽度,单位 px |
windowHeight | number | 变化后的窗口高度,单位 px |
# offWindowResize
移除窗口尺寸变化事件的监听函数
参数 function listener
onWindowResize 传入的监听函数。不传此参数则移除所有监听函数。
# setWindowSize
基础库 3.5.2 起,SDK 2.46.3 起支持
设置移动端的小组件窗体大小,仅小组件类型生效
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
width | number | - | 是 | 宽度 |
height | number | - | 是 | 高度 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码
ft.setWindowSize({
width: 300,
height: 900
})