GraceUI 学习笔记: GracePage

GracePage介绍

GracePage是一个封装了page功能的页面布局组件，有自定义导航栏，自定义底部导航栏和浮动按钮等功能，使用了slot，方便使用。

使用方法：

1. 引用和声明组件
2. 在page的最外层使用<pageGrace></pageGrace>

pageGrace 属性列表
customHeader : { type : Boolean, default : true } // 是否开启自定义导航
headerHeight : { type : Number,  default : 44 } // 头部导航高度，单位 px
headerIndex  : { type : Number,  default : 999 } // 头部导航 层级
headerBG     : { type : String,  default : 'none' } // 头部导航背景颜色
statusBarBG  : { type : String,  default : 'none' } // 沉浸式导航颜色
footerIndex  : { type : Number,  default : 999 } // 底部导航层级
rbWidth      : { type : Number, default : 100} // 悬浮挂件宽度
rbBottom     : { type : Number, default : 100 } // 悬浮挂件bottom 值
rbRight      : { type : Number, default : 20 } // 悬浮挂件 right 值
footerBg     : { type : String,  default : ''} // 底部导航的背景颜色
isSwitchPage :  { type : Boolean, default : false } // 页面是否为一个 入口页内包含的切换页面( 不需要进行 iphoneX 底部适配 )

pageGrace的Slot插槽
<slot name="gHeader"></slot> 头部导航内容
<slot name="gBody"></slot> 页面主体内容
<slot name="gFooter"></slot> 页面底部导航内容
<slot name="gRTArea"></slot> 页面悬浮挂件内容

使用范例：

自定义头部导航栏

<gracePage headerBG="#080" statusBarBG="#800">
     <view class="grace-header-body" slot="gHeader">
        <text class="grace-header-icons grace-icons icon-arrow-left grace-white" @tap.stop="goBack"></text>
        <view class="grace-header-content">
            <text class="grace-header-text grace-ellipsis grace-white">自定义头部导航，想放什么放什么</text>
        </view>
        <text class="grace-header-icons grace-icons icon-set grace-white" style="font-size:22px;" @tap.stop="setFun"></text>
     </view>
</gracePage>

自定义导航栏

自定义底部导航栏

<gracePage footerBG="#000" customHeader="false">
    <view slot="gFooter">
         <view class="grace-space-between">
               <view class="grace-grids grace-border-t" style="width: 250rpx;">
                     <view class="grace-grid-items grace-relative">
                           <text class="grace-grid-icon grace-icons icon-home"></text>
                           <text class="grace-grid-text">首页</text>
                     </view>
                      <view class="grace-grid-items grace-relative">
                           <text class="grace-grid-icon grace-icons icon-shoucang"></text>
                           <text class="grace-grid-text">收藏</text>
                     </view>
               </view>
               <view class="grace-flex-end">
                    <button type="warn" class="grace-footer-button" style="background-color:#606;">立即购买</button>
<button type="warn" class="grace-footer-button" style="background-color:#606;">加入购物车</button>
               </view>
         </view>
    </view>
</gracePage>

自定义底部导航栏
浮动按钮

<gracePage customHeader="false">
    <button slot="gRTArea" class="menu grace-button grace-icons icon-menu"></button>
</gracePage>
<style>
.menu{width:88rpx; height:88rpx; border-radius:88rpx; line-height:88rpx; text-align:center; justify-content:center; background-color:#FF0036; color:#FFFFFF; font-size:50rpx; padding:0;}
</style>

悬浮按钮