mason-homepage uniapp-页面模版
仅作为方便大家快速开发的页面通用模版,无偿使用,有问题请指出,我一样需要不断进步。
自定义状态栏
自定义导航栏
自定义页面
自定义安全距离
自定义下拉刷新
自定义上滑加载
自定义Fixed插槽
子窗体使用范例
App端、微信小程序、H5全兼容。
uni_modules导入,全局使用。状态栏、导航栏、下拉刷新、上滑加载等一次配置,或通过已有slot插槽,直接插入头部导航栏等区域,即可完成页面布局,无需手动编写设计布局,快速开发。
确认uni_modules目录中是否存在mason-homepage插件,并更新至最新版本
pages.json中注册页面时请配置app-plus下属性:"bounce": "none", "titleNView": false
小程序请在pages.json中globalStyle增加配置:"navigationStyle": "custom"
< template >
< mason-homepage :navTitle ="'App Template' " :showNavBack ="false " :showSafeArea ="true ">
<!-- 页面内容插槽 -->
< view slot ="diyContent ">
<!-- 编写你的页面内容 -->
</ view >
</ mason-homepage >
</ template >
组件绑定 刷新时间参数 :refreshTime="refreshTime" 刷新回调函数 @pullRefresh="pullRefresh"
< template >
< mason-homepage :navTitle ="'App Template' " :refreshTime ="refreshTime " @pullRefresh ="pullRefresh " :showNavBack ="false " :showSafeArea ="true ">
<!-- 页面内容插槽 -->
< view slot ="diyContent ">
<!-- 编写你的页面内容 -->
</ view >
</ mason-homepage >
</ template >
pullRefresh ( ) {
// 你的刷新过程
// ......
// 刷新结束 - 更新refreshTime 即触发下拉刷新回弹 建议参考示例工程配合uni.showLoading使用
this . refreshTime = Date . parse ( new Date ( ) ) // refreshTime已在data声明
}
参数
说明
类型
showStatusBar
是否需要状态栏
Boolen
statusBackground
状态栏背景色
String
showNavBar
是否需要导航栏
Boolean
navBackground
导航栏背景色
String
showNavBack
是否需要导航返回按钮
Boolean
diyLeft
是否开启自定义导航左侧按钮
Boolean
diyCenter
是否开启自定义导航中间内容
Boolean
navTitle
导航栏页面标题
String
diyRight
是否开启自定义导航右侧按钮
Boolean
showOpacityBar
是否开启渐变顶部状态+导航栏
Boolean
opacityBackground
渐变顶部状态+导航栏背景色
String
contentBackground
页面容器背景色
String
showRefresh
是否开启下拉刷新
Boolean
refreshTime
下拉刷新完成时间(更新此值即回弹)
Number
showUpLower
是否开启上滑加载
Boolean
showSafeArea
是否开启底部安全区域
Boolean
函数
说明
@leftClick
导航栏左侧按钮点击事件
@rightClick
导航栏右侧按钮点击事件
@pullRefresh
下拉刷新触发事件
@loadingMore
上滑加载触发事件
插槽
说明
slot="diyLeft"
导航栏左侧插槽,需将参数中diyLeft绑定为true
slot="diyCenter"
导航栏中间插槽,需将参数中diyCenter绑定为true
slot="diyRight"
导航栏右侧插槽,槽默认为空直接使用
slot="diyContent"
页面容器插槽,槽默认为空直接使用,所有页面元素写在此槽中
slot="diyFixed"
页面绝对布局元素插槽,槽默认为空直接使用,完整插入,需手动编写fixed属性且z-index大于9
slot="diyPopup"
页面弹出层元素插槽,槽默认为空直接使用,完整插入,App端建议直接使用子窗体,其它建议此插槽配合uni-popup使用