开发工具中无法识别image标签的mode="aspectFill"属性
发布于 5 年前 作者 ucheng 15038 次浏览 来自 问答

开发工具是1.01.170907版本,为image标签添加的mode="aspectFill"属性无法生效。扫描预览二维码后,在手机上显示正常。

4 回复

我贴的图是设计图。

由于我们的功能正在开发中,那个页面现在展示不出来了,稍等一段时间,我再来贴截图

现在不是 aspectFill 的效果吗?

没有复现此问题,请问是否有示例代码?

<view class="images_container">
    <block wx:for="{{photos}}">
      <image
            mode="aspectFill"
            data-idx="{{index}}"
            bindtap="imageViewClicked"
            class="{{(index % 5 == 0 || index % 5 == 1)?'image_col_2':'image_col_3'}}"
            src="{{item.preview_url}}">
     </image>
    </block>
  </view>
.images_container {
  margin-top: 80rpx;
  width: 710rpx;
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  position: relative;
  left: 3rpx;
}
 
.image_col_2 {
  height: 442rpx;
  width: 349rpx;
  margin-right: 6rpx;
  margin-bottom: 6rpx;
}
 
.image_col_3 {
  height: 290rpx;
  width: 230rpx;
  margin-right: 6rpx;
  margin-bottom: 6rpx;
}

代码里有段特殊的判断,是想让奇数行的照片显示3张,偶数行的照片显示两张。

目的实现下图的效果:

该图为设计图,并非截图!!!

该图为设计图,并非截图!!!

该图为设计图,并非截图!!!

回到顶部