更新记录

1.0.0（2023-12-06） 下载此版本

新增页面布局组件

平台兼容性

uni-app

gyc-layout

这是一个页面布局组件，主要集中了页面的标题以及安全距离的兼容（代码简洁，二开方便）

可以快速适配不同手机屏幕安全距离，快速自定义页面标题，减少开发时间，将重点放在页面功能的开发上。

组件参数说明：

组件emit方法说明：

参考示例：

复制代码<template>
    <gyc-layout ref="layout" pageType="scroll" title="页面标题" @ctxLoad="ctxLoad" refresherEnabled :refresherTriggered="refresherTriggered"
        @refresherrefresh="refresherrefresh" @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower">
        <button @click="scrollTo">移动到指定位置</button>
        <view class="box" v-for="item in 10" :key="item">这是一个模拟的列表item...</view>
    </gyc-layout>
</template>

<script>
    export default {
        data() {
            return {
                // 下拉状态
                refresherTriggered: false,
                // 页面scroll-view实例,参考https://developers.weixin.qq.com/miniprogram/dev/api/ui/scroll/ScrollViewContext.html
                CTX: null
            }
        },
        methods: {
            /**
             * 获取layout组件中的scroll-view实例
             * @param {Object} ctx 页面scrolll-view实例
             */
            ctxLoad(ctx) {
                this.CTX = ctx
            },
            /**
             * 触发下拉刷新
             */
            refresherrefresh() {
                this.refresherTriggered = true
                setTimeout(() => {
                    // do...
                    this.refresherTriggered = false
                }, 2000)
            },
            /**
             * 滚动到指定位置
             */
            scrollTo() {
                this.CTX.scrollTo({
                    top: 1000,
                    animated: true
                })
            },
            scrolltoupper() {
                console.log('页面触顶')
            },
            scrolltolower() {
                console.log('页面触底')
            }
        }
    }
</script>

<style scoped lang="scss">
    .box {
        background-color: #FFF;
        border-radius: 20rpx;
        box-shadow: 1px 1px 6px #9f9f9f;
        height: 300rpx;
        box-sizing: border-box;
        margin: 30rpx 30rpx 0 30rpx;
        text-align: center;
        padding: 30rpx;
    }
</style>

eq：

• 目前组件内返回首页的路径为"/pages/index/index"，可按项目具体情况修改返回路径。
• 组件内标题栏icons均为官方uni-icons组件图标，可自行修改。