当前位置: 首页 - 小程序 - GraceUI 学习笔记: GracePage

GraceUI 学习笔记: GracePage

2020-07-06 作者: grassroot 浏览: 212

GracePage介绍

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

使用方法:
  1. 引用和声明组件
  2. 在page的最外层使用
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插槽
 头部导航内容
 页面主体内容
 页面底部导航内容
 页面悬浮挂件内容

使用范例:

自定义头部导航栏

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

作者:厨小满

链接:https://www.jianshu.com/p/c1e83cca060e

来源:简书



评论
本文作者 阅读排行 文章推荐