微信小程序图片两栏显示

时间:2026-02-12 07:38:45

1、打开开发者工具,在项目的pages下新建文件夹mypage,并在文件夹内新建页面mypage,并在app.json中将mypage设为第一页面

微信小程序图片两栏显示

2、在mypage文件夹下放入三张图片

微信小程序图片两栏显示

3、在mypage.js文件中创建一个数组数据,代码如下:

data: {

   xxxx:['1.jpg','2.jpg','3.jpg']

 },

微信小程序图片两栏显示

4、在mpyage.wxml中写代码如下:

<view class="content">

 <view wx:for="{{xxxx}}" class="item">

   <image src="{{item}}" mode="aspectFill">

   </image>

 </view>

</view>

微信小程序图片两栏显示

5、在mypage.wxss中写代码如下:

.content{

 display: flex;

 justify-content: space-between;

 flex-wrap:wrap;

}

.item{

 width: 750rpx;

 margin: 0 0 20rpx 0;

}

.item image{

 width: 100%;

 height: 450rpx;

}

750rpx就是全屏幕宽度

微信小程序图片两栏显示

6、保存代码,编译运行模拟器效果如下图

微信小程序图片两栏显示

7、知道了满屏状态,两栏显示就容易了,修改mypage.wxss代码如下:

.content{

 display: flex;

 justify-content: space-between;

 flex-wrap:wrap;

}

.item{

 width: 375rpx;

 margin: 0 0 20rpx 0;

}

.item image{

 width: 100%;

 height: 450rpx;

}

微信小程序图片两栏显示

8、保存代码,模拟器效果如下图

微信小程序图片两栏显示

© 2026 五度知识库
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com