Navigator 导航

API 调用

QN.navigator.push(options)

QN.navigator.go(options)

打开/跳转页面

API 调用入参

名称 类型 是否可选 含义
options Object 选项
options.url String 需要跳转的URL
options.title Object optional 新页面的 title
options.query Object optional 跳转到 URL 时要传递的 query 参数
options.settings Object optional 设置项
options.settings.animate Boolean optional 切换时是否启用动画效果
options.settings.clearTop Boolean optional 新开页面后,是否关闭除了新页面之外的所有其他页面
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码,成功为0,失败为非0
result.errorMsg String 错误信息
result.data Object optional 新页面返回的数据(如果是请求下一个页面的时候)

调用示例

QN.navigator.push({
    url: 'http://www.taobao.com',
    title: '新开页面标题~~',
    query: { x: 1, y: 2 },
    settings: {
        animate: true,
        request: true,
    }
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

QN.navigator.pop(options)

QN.navigator.back(options)

关闭页面/后退

API 调用入参

名称 类型 是否可选 含义
options Object 选项
options.query Object optional 接口调用参数
options.query.data Object optional 需要返回给前一个页面的数据
options.settings Object optional 设置项
options.settings.animate Boolean optional 切换时是否启用动画效果
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码,成功为0,失败为非0
result.errorMsg String 错误信息

调用示例

QN.navigator.pop({
    query: {
        data: {}
    },
    settings: {
        animate: true,
    }
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

QN.navigator.reload(options);

刷新当前页面

API 调用入参

名称 类型 是否可选 含义
options Object optional 选项
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码,成功为0,失败为非0
result.errorMsg String 错误信息

调用示例

QN.navigator.reload();
QN.navigator.reload({
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

QN.navigator.close(options);

关闭整个插件应用

API 调用入参

名称 类型 是否可选 含义
options Object optional 选项
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码,成功为0,失败为非0
result.errorMsg String 错误信息

调用示例

QN.navigator.close();
QN.navigator.close({
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

QN.navigator.setTitle(options)

设置标题

API 调用入参

名称 类型 是否可选 含义
options Object 选项
options.query Object 接口调用参数
options.query.title String 新标题
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码,成功为0,失败为非0
result.errorMsg String 错误信息

调用示例

QN.navigator.setTitle({
    query: {
        title: '我是标题'
    },
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

QN.navigator.showTitle(options)

显示标题

API 调用入参

名称 类型 是否可选 含义
options Object 选项
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码,成功为0,失败为非0
result.errorMsg String 错误信息

调用示例

QN.navigator.showTitle({
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

QN.navigator.hideTitle(options)

隐藏标题

API 调用入参

名称 类型 是否可选 含义
options Object 选项
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码,成功为0,失败为非0
result.errorMsg String 错误信息

调用示例

QN.navigator.hideTitle({
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

QN.navigator.addButton(options)

添加导航栏自定义按钮

API 调用入参

名称 类型 是否可选 含义
options Object 选项
options.query Object 接口调用参数
options.query.iconName String optional 千牛客户端内置 icon 名称,内置 icon 列表参看本页附录
options.query.iconImg String optional 图标图片,URLBase64(暂不支持 URL)
options.query.text String optional 图标文本,如果 iconNameiconImg 都没有值,则展示文本
options.query.tapEvent String 按钮点击时触发的事件,该事件为 Page 级别事件,可以使用 QN.on 进行监听,注意 tapEvent 不要与其他事件重复
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

iconImg 示例:

类型 示例 备注
URL http://www.icon.com/share.png
URL https://www.icon.com/share.png
Base64 iVBORw0KGgoAAAANSUhEUgAAAgAAAA...

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码,成功为0,失败为非0
result.errorMsg String 错误信息

调用示例

QN.navigator.addButton({
    query: {
        iconName: 'share',
        text: '分享',
        tapEvent: 'Page.share', // 或 `share`
    },
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

QN.navigator.removeButton(options)

移除导航栏自定义按钮

API 调用入参

名称 类型 是否可选 含义
options Object 选项
options.query Object 接口调用参数
options.query.tapEvent String 需要移除的按钮对应的事件(由于按钮事件事件是唯一的,因此也作为移除按钮的标识)
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码,成功为0,失败为非0
result.errorMsg String 错误信息

调用示例

QN.navigator.removeButton({
    query: {
        tapEvent: 'Page.share', // 或 `share`
    },
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

QN.navigator.clearButtons(options)

清除导航栏自定义按钮

API 调用入参

名称 类型 是否可选 含义
options Object 选项
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码,成功为0,失败为非0
result.errorMsg String 错误信息

调用示例

QN.navigator.clearButtons();
QN.navigator.clearButtons({
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

QN.navigator.addMenuItem(options)

添加导航栏菜单列表中自定义菜单项

API 调用入参

名称 类型 是否可选 含义
options Object 选项
options.query Object 接口调用参数
options.query.iconName String 千牛客户端内置 icon 名称,内置 icon 列表参看本页附录
options.query.iconImg String 图标图片,URLBase64(暂不支持 URL)
options.query.text String optional 图标文本,如果 iconNameiconImg 都没有值,则展示文本
options.query.tapEvent String 按钮点击时触发的事件,该事件为 Page 级别事件,可以使用 QN.on 进行监听,注意 tapEvent 不要与其他事件重复
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

iconImg 示例:

类型 示例 备注
URL http://www.icon.com/share.png
URL https://www.icon.com/share.png
Base64 iVBORw0KGgoAAAANSUhEUgAAAgAAAA...

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码,成功为0,失败为非0
result.errorMsg String 错误信息

调用示例

QN.navigator.addMenuItem({
    query: {
        iconName: 'share',
        text: '分享',
        tapEvent: 'Page.share', // 或 `share`
    },
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

QN.navigator.removeMenuItem(options)

移除导航栏菜单列表中自定义菜单项

API 调用入参

名称 类型 是否可选 含义
options Object 选项
options.query Object 接口调用参数
options.query.tapEvent String 需要移除的按钮对应的事件(由于按钮事件事件是唯一的,因此也作为移除按钮的标识)
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码,成功为0,失败为非0
result.errorMsg String 错误信息

调用示例

QN.navigator.removeMenuItem({
    query: {
        tapEvent: 'Page.share', // 或 `share`
    },
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

QN.navigator.clearMenuItems(options)

清除导航栏菜单列表中自定义菜单项

API 调用入参

名称 类型 是否可选 含义
options Object 选项
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码,成功为0,失败为非0
result.errorMsg String 错误信息

调用示例

QN.navigator.clearMenuItems();
QN.navigator.clearMenuItems({
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

QN.navigator.setSwipeBack(options)

启用/禁用iOS下页面的左滑返回,页面加载时默认为启用。

API 调用入参

名称 类型 是否可选 含义
options Object 选项
options.query Object optional 接口调用参数
options.query.enable Boolean optional 是否启用左滑返回
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码,成功为0,失败为非0
result.errorMsg String 错误信息

调用示例

// 禁止左滑返回
QN.navigator.setSwipeBack({
    query: {enable: false},
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

导航栏预置事件

事件名称 含义 备注
Page.back 返回按钮点击事件
Page.close 关闭按钮点击事件
Page.reload 刷新按钮点击事件

当用户操作时,预置事件由千牛客户端触发,你可以监听这些事件并拦截这些按钮的默认行为:

QN.on('Page.back', function(data) {
    // 进行一些处理
    doSomeStuff();
    // 监听事件后,默认行为被拦截,因此要手动调用返回
    QN.navigator.pop();
});

附录

内置 icon 列表

icon 名称 样式 含义