wxappb2b/GuangZuan/miniprogram/layouts/view/index.ts

import { getStatusBarHeight } from '../../stores/index'

Component({
    externalClasses: ['custom-class'],
    options: {
        multipleSlots: true, // 在组件定义时的选项中启用多slot支持
    },
    properties: {
        // 是否显示返回按钮
        showBackButton: {
            type: Boolean,
            value: false,
        },
        // 是否固定导航栏
        navBarFixed: {
            type: Boolean,
            value: false,
        },
        // 导航栏固定时状态栏颜色
        statusBarFixedStyle: {
            type: Object,
            value: <WechatMiniprogram.SetNavigationBarColorOption>{
                frontColor: '#000000',
                backgroundColor: '#ffffff',
            },
        },
        // 页面滚动时状态栏颜色
        statusBarScrollStyle: {
            type: Object,
            value: <WechatMiniprogram.SetNavigationBarColorOption>{
                frontColor: '#ffffff',
                backgroundColor: '#fd4c58',
            },
        }
    },
    data: {
        backButtonOpacity: 1, // 返回按钮透明度，(scrollHeight - scrollTop) / scrollHeight
        navBarOpacity: 0, // 导航栏透明度
        statusBarHeight: getStatusBarHeight(),
    },
    methods: {
        // 设置状态栏颜色
        setStatusBarStyle(option: Object) {
            const style = option as WechatMiniprogram.SetNavigationBarColorOption
            wx.setNavigationBarColor(style)
        },
        // 监听滚动条滚动事件
        onScroll(e: any) {
            if (this.data.navBarFixed) {
                const scrollTop = e.detail.scrollTop
                const scrollHeight = 100 // 最大滚动高度
                const statusBarHeight = this.data.statusBarHeight
                const navBarOpacity = (scrollTop - statusBarHeight) / scrollHeight // 计算透明度

                // 待优化
                // if (navBarOpacity < 1.5) {
                //     this.setData({
                //         navBarOpacity,
                //     }, () => {
                //         if (navBarOpacity > 0.5) {
                //             this.setStatusBarStyle(this.data.statusBarScrollStyle)
                //         } else {
                //             this.setStatusBarStyle(this.data.statusBarFixedStyle)
                //         }
                //     })
                // }

                // 暂时解决方案
                if (this.data.navBarOpacity === 0 && navBarOpacity > 1) {
                    this.setData({
                        navBarOpacity: 1,
                    }, () => {
                        this.setStatusBarStyle(this.data.statusBarScrollStyle)
                    })
                } else if (this.data.navBarOpacity === 1 && navBarOpacity < 1) {
                    this.setData({
                        navBarOpacity: 0,
                    }, () => {
                        this.setStatusBarStyle(this.data.statusBarFixedStyle)
                    })
                }
            }
        }
    },
    attached() {
        if (this.data.navBarFixed) {
            this.setStatusBarStyle(this.data.statusBarFixedStyle)
        }
    }
})