share_activity/components/customPage/customPage.js

const { isEmpty } = require("../../utils/util")

// components/customPage/customPage.js
Component({
    options:{
        multipleSlots: true
    },
    /**
     * 组件的属性列表
     */
    properties: {
        headBgImage: {
            type: String,
            value: ''
        },
        headBgColor: {
            type: String,
            value: ''
        },
        bodyBgImage: {
            type: String,
            value: ''
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        bodyImageHeight: 0
    },

    attached: function() {
        let dwObj = wx.getMenuButtonBoundingClientRect()
        let navHeight_ = (dwObj.top + dwObj.height)
        let capsuleTop_ = dwObj.top
        const systemInfoSync = wx.getSystemInfoSync()
        const windowHeight = systemInfoSync.windowHeight
        const windowWidth = systemInfoSync.windowWidth;
        navHeight_ += capsuleTop_ / 8;

        let headStyle = "height:" + navHeight_ + "px;";
        if (this.data.headBgColor) {
            headStyle += "background-color:" + this.data.headBgColor +";"
        }
        this.setData({
            navHeight: navHeight_,
            capsuleTop:capsuleTop_, 
            capHeight: dwObj.height,
            bodyHeight: windowHeight - navHeight_,
            windowWidth,
            windowHeight,
            headStyle,
        });
    },

    /**
     * 组件的方法列表
     */
    methods: {
        headImageLoadSuccess(e) {
            if (isEmpty(this.data.bodyBgImage)) {
                let { detail: {width, height} } = e
                let wB =  this.data.windowWidth / width
                this.setData({
                    bodyImageHeight: height * wB - this.data.navHeight
                })
                this.notifyParentView()
            }
        },
        bodyImageLoadSuccess(e) {
            let { detail: {width, height} } = e
            let wB =  this.data.windowWidth / width
            this.setData({
                bodyImageHeight: height * wB
            })
            this.notifyParentView()
        },
        handleReachBottom(e) {
            this.triggerEvent("reachbottom", e)
        },
        notifyParentView() {
            this.triggerEvent("sizes", {
                headHeight: this.data.navHeight,
                bodyImageHeight: this.data.bodyImageHeight,
                windowWidth: this.data.windowWidth,
                windowHeight: this.data.windowHeight,
                capsuleTop: this.data.capsuleTop, 
                capHeight: this.data.capHeight,
                bodyHeight: this.data.bodyHeight,
            })
        }
    }
})