您的当前位置:首页正文

微信小程序:计算wxml里盒子的宽、高.....

2024-11-23 来源:个人技术集锦

微信小程序:计算wxml里盒子的宽、高等信息

由于某些标签需要动态设置页面的高度,此时需要计算每个盒子的高度(由于盒子是一些东西撑开的,无法直接得到高度),根据盒子数量及边距距离设置页面高度

得到的数据

与设置的一致

代码:

wxml

<view id="box"></view>

js(主要代码)

Page({
    data: {

    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var that = this;
        var query = wx.createSelectorQuery(); //创建节点选择器
        //#box需要与wxml里面的id保持一致
        query.select('#box').boundingClientRect(function (rect) {
            console.log(rect);
            that.setData({
                box: rect
            });
        }).exec();
    },
})

wxss

#box{
    width: 100px;
    height: 200px;
    background-color: aqua;
    margin: 20px;
}

显示全文