介绍

作为weex页面的根布局，整合空页面，顶部导航栏等基础组件和一些页面能力

API

属性
参数 说明 类型 默认值
showTitleBar 是否展示titleBar Boolean false
title 设置页面titlebar的title String ‘’
nav-left-text 设置页面titlebar的左侧单个文本 String ‘’
nav-left-icon 设置页面titlebar的左侧单个Icon String ‘’
nav-left-image 设置页面titlebar的左侧单个图标 String ‘’
事件
事件名 说明
emptyActionClick 点击空视图主操作按钮会发送此事件
emptySubActionClick 点击空视图次操作按钮会发送此事件
errorActionClick 点击错误视图主操作按钮会发送此事件
errorSubActionClick 点击错误视图次操作按钮会发送此事件
方法
方法名 参数 参数类型 说明
handleRequest Promise Object 传入一个Promise，内部会处理loading和空页面的展示逻辑
setEmptyData emptyData Object 配置空视图
默认配置为
{
type: ‘common’,
title: ‘无结果’,
}
具体可配置项参考fg-empty
setEmptyDesc desc String 快捷配置空视图
等同于setEmptyData({ desc })
setErrorData errorData Object 配置错误视图
{
type: ‘network’,
title: ‘网络异常’,
desc: ‘无法连接服务器，请检查你的网络设置’
}
具体可配置项参考fg-empty
setErrorDesc desc String 快捷配置错误视图
等同于setErrorData({ desc })
getTitlebar - - 返回fg-title-bar的引用
插槽
插槽名 说明
default 主要内容插槽
navLeftSlot fg-title-bar左插槽
navHeadSlot fg-title-bar中间插槽
navRightSlot fg-title-bar右插槽

代码演示

  1. <fg-page
  2.   ref="page"
  3.   title="fg-page"
  4.   @errorActionClick="request"
  5. >
  6.   <template>
  7.     <!--在这里写页面-->
  8.     <div />
  9.   </template>
  10. </fg-page>
  12. methods: {
  13.   request() {
  14.     // 内部会处理loading和空页面的展示逻辑，异常时自行展示错误视图，非异常时根据返回值决定展示或隐藏空视图
  15.     this.$refs.page.handleRequest(promise).then(() => {
  16.       // 相当于 this.$refs.page.setEmptyData({ desc: '没有数据' })
  17.       this.$refs.page.setEmptyDesc('没有数据')
  18.       // 返回值为false时会显示空视图，不需要显示空视图的时候可以返回true也可以不写return语句（相当于返回值为undefined）
  19.       return false
  20.     }).catch((error) => {
  21.       // 这里会自行显示错误视图
  22.       this.$refs.page.setErrorData({
  23.         title: '发生了错误',
  24.         desc: error.message,
  25.         action: '重试',
  26.       })
  27.     }).finally(() => {
  28.       // 可以在这里处理finally要做的事
  29.     })
  30.   },
  31. },