page

含titleBar基础页面容器

内置了weex端titleBar以及多端修改页面标题方法，titleBar为固定高度88cpx。

属性

属性名类型必填默认值说明
titleString是titleBar所显示标题内容
c-bind:backEventHandle否点击返回时触发

slot

插槽名作用
——页面内容
titlebar自定义titlebar，自定义时需保证高度为88cpx，仅weex端可用
menu自定义菜单，仅weex端可用

示例

  1. <template>
  2.   <page title="页面标题" c-bind:back="goback">
  3.     <text class="main">这是页面内容</text>
  4.   </page>
  5. </template>
  6. <script>
  8. import cml from 'chameleon-api'
  10. class Page  {
  11.   methods = {
  12.     goback() {
  13.       cml.showToast({
  14.         message: 'goback'
  15.       })
  16.     }
  17.   }
  18. }
  19. export default new Page();
  21. </script>
  22. <style scoped>
  23. .main {
  24.   color: red;
  25. }
  26. </style>
  28. <script cml-type="json">
  29. {
  30.   "base": {}
  31. }
  32. </script>

Bug & Tip

  • <page>组件为页面级基础容器组件，只能在页面组件中使用，在普通组件中使用不能保证正确显示，使用时需位于页面组件根结点位置。
  • <page>组件在weex端titlebar高度为88cpx，在使用定位时注意兼容。
  • <page>组件内置weex端titlebar仅能满足常规使用，若需要复杂的titlebar则可通过titlebar插槽实现。
  • 由于android和ios页面渲染差异，android端是从状态栏以下开始渲染，而ios是从状态栏开始渲染页面，所以在ios端需要考虑状态栏高度
    查看更多示例