小程序获得元素的宽度、高度

最新推荐文章于 2025-03-14 08:41:49 发布

原创最新推荐文章于 2025-03-14 08:41:49 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #前端

小程序专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种在小程序中让图片以正方形形式显示的方法，通过动态调整图片的高度，使其与宽度保持一致，实现视觉上的统一效果。利用wx.createSelectorQuery()获取图片的实际宽度，并将其赋值为图片的高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序使图片宽高一致，显示为正方形

// An highlighted block
<image bindload="imageLoad" 
       class="gridimg" 
       style="width:100%;height:{{ imagesHeight }}px;" 
       src="....." 
></image>

wx.createSelectorQuery() 创建节点选择器

  imageLoad: function (e) {
    let query = wx.createSelectorQuery();
    query.select('.gridimg').boundingClientRect(rect => {
      let width = rect.width;
      if(width>0){
      //设置高度跟宽度相同，然后应用到wxml中
        this.setData({
          imagesHeight: width
        });
        return;
      }
    }).exec();
  },