Class: Page

Page

通常一个web应用只有一个html页面,我们在这里约定一个术语'Page'来描述能承载一屏内容的一个javascript容器组件, 相对于多页面的一个html页面,而不是一个真正的html类型的页面。 Page本身也是一个React Component,component的生命周期只改变了render(),其它的未做任何修改,可正常使用。


new Page()

Example
import React, { Component } from 'react';
import Page from 'chanjet-ui/lib/Page';

class CustomerDetail extends Page{
     //页面标题
     title = '客户详情';

     //顶部状态栏配置, 没有特殊需求可以不用配置
     navBar = {
         right:{
             type:'button',
             item:{
                 icon:'add',
                 onClick: function(){}
             }
         }
     };

     //渲染页面,注意是renderPage
     renderContent(){
         return(
             <div>
                 detail
             </div>
         )
     }
}

export default CustomerDetail;

Extends

  • React.Component

Members


className :string

page容器上添加一个自定义的class

Type:
  • string

isActive :boolean

当前页是否处于激活状态

Type:
  • boolean

isRootPage :any

当前的page是否是进入应用的第一页

Type:
  • any

顶部导航栏配置

Type:
  • JSONObject
Properties:
Name Type Argument Description
onBackClick function <optional>

导航栏左侧返回按钮事件

onCloseClick function <optional>

导航栏左侧关闭按钮事件

backgroundColor String <optional>

导航栏背景颜色

color String <optional>

字体颜色, (icon是字体icon, 通过颜色控制)

highlightColor String <optional>

按钮激活时字体颜色

disabledColor String <optional>

按钮禁用时的字体颜色

right JSONObject <optional>

导航栏右侧配置,可放置一个按钮或菜单, 不可共存, 按钮只能是一个图标或者是一个文本,不能是图标加文本

Properties
Name Type Argument Default Description
hide Boolean <optional>
false

是否隐藏右侧内容

item Object/Array

按钮或菜单配置, menu传入的是菜单项的配置的列表

Properties
Name Type Argument Default Description
text String

按钮或菜单项文本, 当类型是button时,优先取text,如果text和icon同时传会忽略掉icon

onClick function

按钮或菜单项点击事件,

icon String

按钮icon, 类型有: add , back , edit , share , del , openLink

disabled Boolean <optional>
false

按钮是否禁用

Example
navBar = {
         onBackClick: function(){},
         onCloseClick: function(){},
         right:
             {
                 type:'menu',
                 item :[
                     {text:"item1", onClick:()=>alert('item1')},
                     {text:"item2", onClick:()=>alert('item2')}
                 ]
             }
         color: '#ffffff',
         highlightColor:'#ffffff',
         disabledColor: '#ffffff'
 }

导航栏实例,可以用此实例调用其下的公开方法

Type:
Example
this.navbarInstance.setTitle('新标题')
 this.navbarInstance.setRightMeun({})

应用导航控制器,Application级别,单例

Type:
Example
this.navigationController.push('/detail');

pageId :any

当前page的id

Type:
  • any

title :String

页面标题,纯文本,默认会对html标签编码。

Type:
  • String

Methods


active()

页面激活时调用


close()

关闭 native 轻应用


init()

初始化方法,会在render之前调用


pageBackReceiveResult(behiverCode, data, requestCode)

当页面上一个页面返回的时候会执行此方法

Parameters:
Name Type Description
behiverCode String

值为 'ok'和'cancel' 表示用户做了确认或取消操作

data JSONObject

回传的参数

requestCode

当前页面访问


postNavbarMixin(navbarOpt)

在navBar配置在传递使用之前调用, 通常用来在使用navBar之前对其进行修改

Parameters:
Name Type Description
navbarOpt JSONObject

Page中的navBar配置

Returns:
Type
JSONObject
Example
postNavbarMixin(navbarOpt){
  navbarOpt.right.item.icon = 'del';
  return navbarOpt
}

renderContent()

Page页面内容渲染

Returns:
Type
ReactXML

restoreInstanceState(savedState)

native已销毁的页面恢复时通知App控制器调用,savedState是从native中获取 当这个方法被调用时savedState必然不为空

Parameters:
Name Type Default Description
savedState JSONObject null

native传过来要回复的状态数据

Returns:
Type
JSONObject

saveInstanceState(savedInstanceState)

native销毁页面时,通知App控制器调用,用户重写此方法,在方法内给savedInstanceState赋值

Parameters:
Name Type Default Description
savedInstanceState JSONObject null

要存贮的状态数据

Returns:
Type
JSONObject

unActive()