GracePage介紹

GracePage是一個(gè)封裝了page功能的頁(yè)面布局組件，有自定義導(dǎo)航欄，自定義底部導(dǎo)航欄和浮動(dòng)按鈕等功能，使用了slot，方便使用。

使用方法：

1. 引用和聲明組件
2. 在page的最外層使用<pageGrace></pageGrace>

pageGrace 屬性列表
customHeader : { type : Boolean, default : true } // 是否開(kāi)啟自定義導(dǎo)航
headerHeight : { type : Number,  default : 44 } // 頭部導(dǎo)航高度，單位 px
headerIndex  : { type : Number,  default : 999 } // 頭部導(dǎo)航 層級(jí)
headerBG     : { type : String,  default : 'none' } // 頭部導(dǎo)航背景顏色
statusBarBG  : { type : String,  default : 'none' } // 沉浸式導(dǎo)航顏色
footerIndex  : { type : Number,  default : 999 } // 底部導(dǎo)航層級(jí)
rbWidth      : { type : Number, default : 100} // 懸浮掛件寬度
rbBottom     : { type : Number, default : 100 } // 懸浮掛件bottom 值
rbRight      : { type : Number, default : 20 } // 懸浮掛件 right 值
footerBg     : { type : String,  default : ''} // 底部導(dǎo)航的背景顏色
isSwitchPage :  { type : Boolean, default : false } // 頁(yè)面是否為一個(gè) 入口頁(yè)內(nèi)包含的切換頁(yè)面( 不需要進(jìn)行 iphoneX 底部適配 )

pageGrace的Slot插槽
<slot name="gHeader"></slot> 頭部導(dǎo)航內(nèi)容
<slot name="gBody"></slot> 頁(yè)面主體內(nèi)容
<slot name="gFooter"></slot> 頁(yè)面底部導(dǎo)航內(nèi)容
<slot name="gRTArea"></slot> 頁(yè)面懸浮掛件內(nèi)容

使用范例：

自定義頭部導(dǎo)航欄

<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">自定義頭部導(dǎo)航，想放什么放什么</text>
        </view>
        <text class="grace-header-icons grace-icons icon-set grace-white" style="font-size:22px;" @tap.stop="setFun"></text>
     </view>
</gracePage>

自定義導(dǎo)航欄

自定義底部導(dǎo)航欄

<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">首頁(yè)</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;">立即購(gòu)買</button>
<button type="warn" class="grace-footer-button" style="background-color:#606;">加入購(gòu)物車</button>
               </view>
         </view>
    </view>
</gracePage>

自定義底部導(dǎo)航欄

<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>

懸浮按鈕