微信小程序长图片自适应

作者 : admin 本文共653个字，预计阅读时间需要2分钟发布时间： 2024-06-10 共2人阅读

/*wxss中的代码*/
.image-container {  
  display:flex;
  width:  100%; /* 或其他需要的宽度 */  
  /* margin-bottom: 10px; //图片之间的间距   */
  height: auto;
}

核心：要真正自适应，就要在wxml中加入固定宽度style=“width:750rpx”

/*wxml中的代码*/
<view class="image-container" wx:for="{{imgUrls}}" wx:key="index">
  <image src="{{item}}" mode="widthFix" style="width:750rpx"/>
</view>

/*js中的代码*/
data: {
    imgUrls: [
      '/images/2024/0609/yzpl1.jpg',
      '/images/2024/0609/yzpl2.jpg',
      '/images/2024/0609/yzpl3.jpg',
      '/images/2024/0609/yzpl4.jpg',
      '/images/2024/0609/yzpl5.jpg',
      '/images/2024/0609/yzpl6.jpg',
      '/images/2024/0609/yzpl7.jpg',
      '/images/2024/0609/yzpl8.jpg',
      '/images/2024/0609/yzpl9.jpg',
      '/images/2024/0609/yzpl10.jpg',
      '/images/2024/0609/yzpl11.jpg',
    ]

  },