界面
1. 交互
1.1. 隐藏 loading 提示框
- 名称
hide-loading
- 类型
- 执行类
-
参数
- 返回值
- 无
- 示例
import hide_loading from '@feidao/web/atom/wx/app/api/interaction/hide-loading';
hide_loading();
1.2. 隐藏消息提示框
- 名称
hide-toast
- 类型
- 执行类
-
参数
- 返回值
- 无
- 示例
import hide_toast from '@feidao/web/atom/wx/app/api/interaction/hide-toast';
hide_toast();
//
1.3. 显示操作菜单
- 名称
show-action-sheet
- 类型
- 执行类
- 参数
itemList: string[]
按钮的文字数组,数组长度最大为 6itemColor?: string
按钮的文字颜色
- 返回值
{msg: {tapIndex: number;};success: boolean;}
- 示例
import show_action_sheet from '@feidao/web/atom/wx/app/api/interaction/show-action-sheet';
const res = show_action_sheet(['A','B','C']);
const res = show_action_sheet(['A','B','C'], 'red');
//
1.4. 显示 loading 提示框
- 名称
show-loading
- 类型
- 执行类
- 参数
showtitle: string
提示的内容mask?: boolean
是否显示透明蒙层,防止触摸穿透
- 返回值
boolean
- 示例
import show_loading from '@feidao/web/atom/wx/app/api/interaction/show-loading';
const res = show_loading('title');
const res = show_loading('title', true);
//
1.5. 显示模态对话框
- 名称
show-modal
- 类型
- 执行类
- 参数
title: string
提示的标题content: string
提示的内容cancelText?: string
取消按钮的文字,最多 4 个字符showCancel?: boolean
是否显示取消按钮cancelColor?: string
取消按钮的文字颜色,必须是 16 进制格式的颜色字符串confirmText?: string
确认按钮的文字,最多 4 个字符confirmColor?: string
确认按钮的文字颜色,必须是 16 进制格式的颜色字符串
- 返回值
{msg: {confirm: boolean;cancel: boolean;};success: boolean}
- 示例
import show_modal from '@feidao/web/atom/wx/app/api/interaction/show-modal';
const res = show_modal('title', 'content');
const res = show_modal('title', 'content', 'cancel');
const res = show_modal('title', 'content', 'cancel', true);
const res = show_modal('title', 'content', 'cancel', true, '#00000');
const res = show_modal('title', 'content', 'cancel', true, '#00000', 'sure');
const res = show_modal('title', 'content', 'cancel', true, '#00000', 'sure', '#22222');
//
1.6. 显示消息提示框
- 名称
show-toast
- 类型
- 执行类
- 参数
title: string
提示的内容icon: 'success' | 'loading' | 'none'
图标duration?: number
提示的延迟时间image?: string
自定义图标的本地路径,image 的优先级高于 iconmask?: boolean
是否显示透明蒙层,防止触摸穿透
- 返回值
boolean
- 示例
import show_toast from '@feidao/web/atom/wx/app/api/interaction/show-toast';
const res = show_toast('title', 'success');
const res = show_toast('title', 'success', 100);
const res = show_toast('title', 'success', 100, 'image');
const res = show_toast('title', 'success', 100, 'image', true);
//
2. 下拉刷新
2.1. 开始下拉刷新
注意:调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
- 名称
start-pull-down-refresh
- 类型
- 执行类
-
参数
- 返回值
- 无
- 示例
import start_pull_down_refresh from '@feidao/web/atom/wx/app/api/interaction/start-pull-down-refresh';
start_pull_down_refresh('interactionPath');
//
2.2. 停止当前页面下拉刷新
- 名称
stop-pull-down-refresh
- 类型
- 执行类
-
参数
- 返回值
- 无
- 示例
import stop_pull_down_refresh from '@feidao/web/atom/wx/app/api/interaction/stop-pull-down-refresh';
stop_pull_down_refresh('interactionPath');
//
3. 滚动
3.1. 将页面滚动到目标位置
- 名称
page-scroll-to
- 类型
- 执行类
- 参数
scrollTop: number
滚动到页面的目标位置,单位 pxduration: number
滚动动画的时长,单位 ms
- 返回值
- 无
- 示例
import page_scroll_to from '@feidao/web/atom/wx/app/api/interaction/page-scroll-to';
page_scroll_to(200, 0);
page_scroll_to(200, 300);
//
4. 导航栏
4.1. 在当前页面隐藏导航条加载动画
- 名称
hide-nav-bar-loading
- 类型
- 执行类
-
参数
- 返回值
- 无
- 示例
import hide_nav_bar_loading from '@feidao/web/atom/wx/app/api/interaction/hide-nav-bar-loading';
hide_nav_bar_loading('interactionPath');
//
4.2. 设置页面导航条颜色
- 名称
set-nav-bar-color
- 类型
- 执行类
- 参数
frontColor: '#ffffff' | '#000000'
前景颜色值,包括按钮、标题、状态栏的颜色,仅支持 #ffffff 和 #000000backgroundColor: string
背景颜色值,有效值为十六进制颜色animation?: { duration?: number; timingFunc?: 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' }
动画效果 duation 动画变化时间,单位 ms timingFunc 动画变化方式
- 返回值
boolean
- 示例
import set_nav_bar_color from '@feidao/web/atom/wx/app/api/interaction/set-nav-bar-color';
const res = set_nav_bar_color('#ffffff', '#251562');
const res = set_nav_bar_color('#ffffff', '#251562',{duration: 200});
const res = set_nav_bar_color('#ffffff', '#251562',{duration: 200, timingFunc: 'easeIn'});
//
4.3. 动态设置当前页面的标题
- 名称
set-nav-bar-title
- 类型
- 执行类
- 参数
title: string
页面标题
- 返回值
boolean
- 示例
import set_nav_bar_title from '@feidao/web/atom/wx/app/api/interaction/set-nav-bar-title';
const res = set_nav_bar_title('标题');
//
4.4. 在当前页面显示导航条加载动画
- 名称
show-nav-bar-loading
- 类型
- 执行类
-
参数
- 返回值
- 无
- 示例
import show_nav_bar_loading from '@feidao/web/atom/wx/app/api/interaction/show-nav-bar-loading';
show_nav_bar_loading();
//
5. 置顶
5.1. 动态设置置顶栏文字内容
注意:只有当前小程序被置顶时能生效,如果当前小程序没有被置顶,也能调用成功,但是不会立即生效,只有在用户将这个小程序置顶后才换上设置的文字内容
- 名称
set-top-bar-text
- 类型
- 执行类
- 参数
text: string
置顶栏文字
- 返回值
boolean
- 示例
import set_top_bar_text from '@feidao/web/atom/wx/app/api/interaction/set-top-bar-text';
const res = set_top_bar_text('置顶');
//