微信小程序长图片自适应
- 2024-06-05 14:54
- 微信小程序, 小程序, javascript, 开发语言, ecmascript
- 66人 已看
/*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: [
'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',
]
},