更新记录

1.0.7（2022-03-08） 下载此版本

插件包压缩至原20%大小

1.0.6（2022-03-08） 下载此版本

新增渐变状态栏+导航栏配置参数，兼容小程序顶部胶囊

1.0.5（2022-03-04） 下载此版本

新增uni-popup与插件配合使用案例

平台兼容性

uni-app

其他

mason-homepage uniapp-页面模版

仅作为方便大家快速开发的页面通用模版，无偿使用，有问题请指出，我一样需要不断进步。

模版内容

• 自定义状态栏
• 自定义导航栏
• 自定义页面
• 自定义安全距离
• 自定义下拉刷新
• 自定义上滑加载
• 自定义Fixed插槽
• 子窗体使用范例

优势

• App端、微信小程序、H5全兼容。
• uni_modules导入，全局使用。状态栏、导航栏、下拉刷新、上滑加载等一次配置，或通过已有slot插槽，直接插入头部导航栏等区域，即可完成页面布局，无需手动编写设计布局，快速开发。

如何使用

1. uni_modules导入

• 确认uni_modules目录中是否存在mason-homepage插件，并更新至最新版本

2. 页面属性配置

• pages.json中注册页面时请配置app-plus下属性："bounce": "none", "titleNView": false
• 小程序请在pages.json中globalStyle增加配置："navigationStyle": "custom"

3. 直接使用模版编写内容

    <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声明
  }

参数说明 - 详细请对比示例工程

函数说明 - 详细请对比示例工程

插槽说明 - 详细请对比示例工程