werun-wxapp/nova-werun/pages/circle-detail/index.js

// nova-werun/pages/circle-detail/index.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
                //屏幕高度
                statusBarHeight: 0, // 状态栏高度
                screenHeight: 0, // 屏幕高度
                customHeight: 0, // 自定义导航栏高度（如小程序右上角胶囊按钮）
                bottomNavHeight: 0, // 底部导航栏高度
                contentHeight: 0, // 可用内容高度
                contentHeight2: 0,
                contentpadding: 0, //顶部padding高度
                //图片
                images: [
                    'http://img2.baidu.com/it/u=2324169262,1340424811&fm=253&app=138&f=JPEG?w=800&h=1422',
                    'https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422',
                    'https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422',
                    'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
                    'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
                    'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
                    'https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422',
                    'https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422',
                    'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
                    'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
                    'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
                    'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
                    'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
                    'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
        
                ],
                imageclass:''
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
                    // 在组件实例进入页面节点树时执行
            // 计算
            const systemInfo = wx.getSystemInfoSync();
            const statusBarHeight = systemInfo.statusBarHeight || 0;
            const screenHeight = systemInfo.screenHeight || 0;
            const custom = wx.getMenuButtonBoundingClientRect();
            const customHeight = custom.height + 10 + 2 || 0;
            const bottomNavHeight = systemInfo.screenHeight - systemInfo.safeArea.bottom || 0;

            const contentpadding = (statusBarHeight + customHeight) * 750 / systemInfo.windowWidth;
            const contentHeight = (screenHeight - bottomNavHeight ) * 750 / systemInfo.windowWidth;
            const contentHeight2 = (screenHeight - bottomNavHeight - 50 - statusBarHeight - customHeight) * 750 / systemInfo.windowWidth;
            this.setData({
                statusBarHeight,
                screenHeight,
                customHeight,
                bottomNavHeight,
                contentHeight,
                contentpadding,
                contentHeight2
            });
            console.log('123', contentHeight, contentHeight2);
    },


    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    },
    onImageLoad: function (e) {
        const {
            width,
            height
        } = e.detail; // 获取图片的宽高
        console.log('11', e.detail);
        const imageClass = width > height ? 'image-landscape' : 'image-portrait'; // 判断横竖屏

        this.setData({
            imageclass: imageClass // 动态设置图片的类名
        });
    },
    previewImage: function(e) {
        const index = e.currentTarget.dataset.index; // 获取当前点击图片的索引
        const images = this.data.images; // 获取所有图片的链接

        wx.previewImage({
            current: images[index], // 当前显示图片的链接
            urls: images // 需要预览的图片链接列表
        });
    },
    goback(){
        wx.navigateBack({
            delta: 1 // 返回上一页
        });
    }
})