css
/*wxss中的代码*/
.image-container {
display:flex;
width: 100%; /* 或其他需要的宽度 */
/* margin-bottom: 10px; //图片之间的间距 */
height: auto;
}
核心:要真正自适应,就要在wxml中加入固定宽度style="width:750rpx"
xml
/*wxml中的代码*/
<view class="image-container" wx:for="{{imgUrls}}" wx:key="index">
<image src="{{item}}" mode="widthFix" style="width:750rpx"/>
</view>
javascript
/*js中的代码*/
data: {
imgUrls: [
'http://xxx.com/media/image/yzpl1.jpg',
'http://xxx.com/media/image/yzpl2.jpg',
'http://xxx.com/media/image/yzpl3.jpg',
'http://xxx.com/media/image/yzpl4.jpg',
'http://xxx.com/media/image/yzpl5.jpg',
'http://xxx.com/media/image/yzpl6.jpg',
'http://xxx.com/media/image/yzpl7.jpg',
'http://xxx.com/media/image/yzpl8.jpg',
'http://xxx.com/media/image/yzpl9.jpg',
'http://xxx.com/media/image/yzpl10.jpg',
'http://xxx.com/media/image/yzpl11.jpg',
]
},